Bootstrap 3 broken row on mobile only

Question

I am having a problem with bootstrap 3 and some thumbnails where although I'm using the same code and the image sizes are exactly the same the last image row is broken on mobile when in vertical only

Here is the code:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=4">
                <img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt="">
                <div class="text-center text_margin">styling</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=5">
                <img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt="">
                <div class="text-center text_margin">colour</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=6">
                <img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt="">
                <div class="text-center text_margin">extensions</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=7">
                <img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt="">
                <div class="text-center text_margin">hair enhancements</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=8">
                <img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt="">
                <div class="text-center text_margin">smoothing treatment</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="?service=9">
                <img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt="">
                <div class="text-center text_margin">hair up</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="meet-the-team">
                <img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt="">
                <div class="text-center text_margin">meet the team</div>
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="/price-list/">
                <img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt="">
                <div class="text-center text_margin">price list</div>
            </a>
        </div>
    </div><!--end row-->
</div><!--end container-->

Answer 1

This is happening because some of the text below the thumbnails is wrapping, and as a result the thumbnail heights are different. One way to fix this problem is to clear the columns float on mobile with CSS like this..

@media (max-width: 768px) {
    .row > .col-xs-6:nth-child(2n+1) {
        clear: left;
    }
}

Demo 1: http://codeply.com/go/Bgt8JFkPht

Another option (simpler), is to use CSS text-overflow ellipsis on the text DIV's since it's these DIVs that are causing the height to be different on each thumbnail. When the thumbnail heights are the same, the row wrapping is not an issue..

Demo 2: http://codeply.com/go/5uOP4bM5pk

Answer 2

Check your text-margin class, when adding a margin or padding to some items in Bootstrap, you change the width of your columns.