Bootstrap with Masonry plug-in

Question

I can't find to fix my error in my code and why it did that. I have 3 colunm and the latter does not fit on the same line. Why she move down and not remain on the same line ?

The problem : http://jsbin.com/kolobugosika/2/

My code : http://jsbin.com/kolobugosika/2/edit

Thanks for your help

Answer 1

you have a couple errors, the first one is conceptual about Bootstrap. Just for reference, remember the sum of a row has to be 12 (unless you're using a custom Bootstrap grid), so your current code

<div class="container">
    <div class="row masonry">
        <div class="col-sm-3 col-md-6">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 1</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/330x330/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 2</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 3</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

has to be modified to:

<div class="container">
    <div class="row masonry">
        <div class="col-sm-4 col-md-6">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 1</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/330x330/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 2</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 3</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/container-->

(Note that there could be one or two additional divs in this wall of code, but you weren't very helpful, so be sure to check if you find an additional div, I'm just copying and pasting between windows since I won't signup to jsbin)

Now, let's go to your JS:

                 $(document).ready(function () {
            var $container = $('.masonry');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '[class*="col-"]',
                    columnWidth: '[class*="col-"]'
                });
            });
        });

if you check carefully, you'll see this line: columnWidth: '[class*="col-"]', which is obviously wrong since a class can't be a columnWidth. That is an error, and with the HTML markup fix fixes things for small screens, but still not enough for big screens, so we have to add up a tiny bit of JavaScript:

$(document).ready(function () {
    var $container = $('.masonry');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '[class*="col-"]',
            columnWidth: container.querySelector('.grid-sizer')
        });
    });
});

the .grid-sizer class is a little known, little used and absolutely lovely featured of Masonry which is meant specially for... responsive grids! So you add that and voilá, your template starts to work as supposed