Images not aligning properly on Bootstrap

Question

I am currently learning front end development using boot strap and I seem to have hit an issue where the images that i have on my grid appear to have an "extra" box when I resize the browser to tablet size original size Tablet size

Currently I have 9 images and I've tackled it using the code below;

                <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 2nd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 3rd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>      
            </div>
        </div>

Actual code can be found in this link Code . Note that I am still using Bootstrap 3

Thanks in advance.

Answer 1

Your fourth photo is smaller than the other ones. All the photos are 500 x 333px, but this one is 500 x 331px.

So basically this is what is happening . Those 2px missing in the images are creating a new line in the 'wrong' position.

You can make sure your images have the same height by editing them or maybe using CSS (height:333px) or even the HTML attribute at the img tag (height='333').

Answer 2

That is not a extra box there, what is happening is that you are using bootstrap prior 4.0 and it floats the elements on its grid system. And as your fourth image height (331px) is smaller than the other ones height (333px) the float flow breaks...

You can use the new 4.0+ bootstrap which uses flexboxes on its grid system and it will solve the issue. Or also you can apply the clearfix approach on the Bootstrap 3, see further...

See: https://getbootstrap.com/docs/4.1/layout/grid/

Also see: https://getbootstrap.com/

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="container"> <div class="jumbotron"> <h1><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> The Image Gallery</h1> <p> Manila - A bunch of images from the city I was born in (with photos I didn't take) </p> <div class="row"> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1520177621480-030b90c31f1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e35879c1bf55ea0b9d516fa110885ead&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1521993225894-b506a694ae66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e83cbfd2d523ec1793dc2f9b285b574&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1510672151757-6a0d9d06b4fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64c5bed898600148d787956c4446d623&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <!-- 2nd row --> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1521295105158-fdc2a8225628?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eb9798deb2e23486ef9500b392c142a5&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1514610069400-202a277fac8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63d2b01d61b17f85d076c0f66237f3da&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1488417607860-c37d00aebe62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4528d4f6d029b4cadf847d84792728f&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <!-- 3rd row --> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1526626607369-f89fe1ed77a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6959884bfc67d7bdefd4dfdbd2c5ba67&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1507486673731-8e2cb2d8f106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c258c1d18758475d7499e21d2443de57&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> <div class="col-lg-4 col-sm-6"> <img src="https://images.unsplash.com/photo-1521296382126-7f742828640b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b8ca335ff63ed7c073a3e42990b49964&auto=format&fit=crop&w=500&q=60" class="img-thumbnail"> </div> </div> </div> 

To solve that on Bootstrap 3 you can use the clearfix approach:

<div class="clearfix"></div>

See snippet below:

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <div class="jumbotron"> <h1><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> The Image Gallery</h1> <p> Manila - A bunch of images from the city I was born in (with photos I didn't take) </p> <div class="row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1520177621480-030b90c31f1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e35879c1bf55ea0b9d516fa110885ead&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1521993225894-b506a694ae66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e83cbfd2d523ec1793dc2f9b285b574&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="clearfix"></div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1510672151757-6a0d9d06b4fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64c5bed898600148d787956c4446d623&auto=format&fit=crop&w=500&q=60"> </div> </div> <!-- 2nd row --> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1521295105158-fdc2a8225628?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eb9798deb2e23486ef9500b392c142a5&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="clearfix"></div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1514610069400-202a277fac8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63d2b01d61b17f85d076c0f66237f3da&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1488417607860-c37d00aebe62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4528d4f6d029b4cadf847d84792728f&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="clearfix"></div> <!-- 3rd row --> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1526626607369-f89fe1ed77a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6959884bfc67d7bdefd4dfdbd2c5ba67&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1507486673731-8e2cb2d8f106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c258c1d18758475d7499e21d2443de57&auto=format&fit=crop&w=500&q=60"> </div> </div> <div class="clearfix"></div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1521296382126-7f742828640b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b8ca335ff63ed7c073a3e42990b49964&auto=format&fit=crop&w=500&q=60"> </div> </div> </div> </div> 

Answer 3

Yep these guys are right, the 4th image is bigger.

See bootstrap 3 version here https://jsfiddle.net/joshmoto/3aqfhoz7/

But hey if you use bootstrap 4 then it is not an issue. Flex rules!

See bootstrap 4 version here https://jsfiddle.net/joshmoto/mev4sqbo/2

Or fix accordingly by making sure your images ratios are constant.

.jsfiddle-code {
 i-have: none;
}