-1

I'm creating a product page using bootstrap and was just wondering how to remove the white space between two rows? I've highlighted the space that is causing problems, the page itself isn't finished but I foresee this being an issue I'll run into again and want to deal with it the now and be able to get better practice when I encounter it later.

Page Capture

<body>
    <div class="container">
        <div class="row justify-content-center" id="header" style="margin-bottom: 0px">
            <div class="col-md-3">
                <img src="fakelogo.png" alt="Placeholder logo for Golden Shoe" width="100%" height="40%">
            </div>
            <div class="col-md-6">
                <nav class="nav justify-content-center">
                    <a class="nav-link" href="#">Home</a>
                    <a class="nav-link" href="#">Products</a>
                    <a class="nav-link" href="#">My Account</a>
                    <a class="nav-link" href="#">About</a>
                    <a class="nav-link" href="#">Contact</a>
                </nav>          
            </div>
            <div class="col-md-3">
                <img src="shoppingcart.png" alt="Shopping cart icon" width="10%" height="10%">
                <p>Your Shopping Cart</p>
                <p>Shoes : 0  Cost: 0 </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        <p>Search By</p>
                        <form action="">
                            <div class="form-group">
                                <label for="keywords">Keywords: </label>
                                <input type="text" class="form-control" id="keywords">
                            </div>
                            <div class="form-group">
                                <label for="category">Categorys</label>
                                <select class="form-control" id="category">
                                    <option> -- Select Category --</option>
                                    <option>Men's Sports</option>
                                    <option>Men's Evening Wear</option>
                                    <option>Mens's Casual</option>
                                    <option>Men's Slippers</option>
                                    <option>Men's Sandles</option>
                                    <option>Woman's Sports</option>
                                    <option>Woman's Evening Wear</option>
                                    <option>Woman's Casual</option>
                                    <option>Woman's Slippers</option>
                                    <option>Woman's Sandles</option>
                                    <option>Woman's Highheels</option>
                                    <option>Womans's Pumps</option>
                                    <option>All</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">Search</button>
                        </form>                         
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>Categories</p>
                        <ul>
                            <li>Men's Sports</li>
                            <li>Men's Evening Wear</li>
                            <li>Men's Casual</li>
                            <li>Men's Slippers</li>
                            <li>Men's Sandles</li>
                            <li>Woman's Sports</li>
                            <li>Woman's Evening Wear</li>
                            <li>Woman's Casual</li>
                            <li>Woman's Slippers</li>
                            <li>Woman's Sandles</li>
                            <li>Woman's Highheels</li>
                            <li>Woman's Pumps</li>
                            <li>All</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-sm-6">
                        <img id="displayImage" src="DisplayShoe/1.png" alt="Primary shoe display image" style="width: 100%;height: 80%;">
                    </div>
Chubbs
  • 39
  • 4
  • 1
    Hi Chubbs,, Share your website url, its difficult answer like this. – Akshay Prabhakar Nov 27 '19 at 15:22
  • 1
    Row's don't have space by default. There's something else going on here that's not immediately identifiable by the snippet you've shared. I would be looking for a missing closing tag somewhere in the DOM or some CSS selector inheritance as the culprit. – Chris W. Nov 27 '19 at 15:22

2 Answers2

1

Issue is you're setting width of the image to 100% and height of the image to 40%.

<div class="col-md-3">
    <img src="fakelogo.png" alt="Placeholder logo for Golden Shoe" width="100%" height="40%">
</div>

To avoid this use max-height and max-width(px) with Bootstrap responsive images.

Live demo

hbamithkumara
  • 2,344
  • 1
  • 17
  • 17
1

As @hbamithkumara mentioned you can use bootstraps img-fluid class. The example below shows the magic behind the scenes.

In short: When you set width AND height of an image its very likely to get distorted. When you set only one of them the otherone gets scaled by the images proportions. Since you want to fill the width of your container you simply set width to 100% thats it :)

Click "Run code snippet" then "Full page"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row justify-content-center" id="header" style="margin-bottom: 0px">
        <div class="col-md-3">
            <img src="http://lorempixel.com/300/160/business" alt="Placeholder logo for Golden Shoe" style="width: 100%">
        </div>
        <div class="col-md-6">
            <nav class="nav justify-content-center">
                <a class="nav-link" href="#">Home</a>
                <a class="nav-link" href="#">Products</a>
                <a class="nav-link" href="#">My Account</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </nav>          
        </div>
        <div class="col-md-3">
            <img src="http://lorempixel.com/100/100/business" alt="Shopping cart icon" width="10%">
            <p>Your Shopping Cart</p>
            <p>Shoes : 0  Cost: 0 </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <p>Search By</p>
                    <form action="">
                        <div class="form-group">
                            <label for="keywords">Keywords: </label>
                            <input type="text" class="form-control" id="keywords">
                        </div>
                        <div class="form-group">
                            <label for="category">Categorys</label>
                            <select class="form-control" id="category">
                                <option> -- Select Category --</option>
                                <option>Men's Sports</option>
                                <option>Men's Evening Wear</option>
                                <option>Mens's Casual</option>
                                <option>Men's Slippers</option>
                                <option>Men's Sandles</option>
                                <option>Woman's Sports</option>
                                <option>Woman's Evening Wear</option>
                                <option>Woman's Casual</option>
                                <option>Woman's Slippers</option>
                                <option>Woman's Sandles</option>
                                <option>Woman's Highheels</option>
                                <option>Womans's Pumps</option>
                                <option>All</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Search</button>
                    </form>                         
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p>Categories</p>
                    <ul>
                        <li>Men's Sports</li>
                        <li>Men's Evening Wear</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-6">
                    <img id="displayImage" src="http://lorempixel.com/200/400/nature" alt="Primary shoe display image" style="width: 100%;">
                </div>
                <div class="col-md-6">
                    <img id="displayImage" src="http://lorempixel.com/300/500/fashion" alt="Primary shoe display image" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>
SirPilan
  • 4,649
  • 2
  • 13
  • 26