1

I am using bootstrap grid to make my page responsive and i have following core structure for my page:

<div class="row">

    <div class="col-md-8">

        <div class="row">

            <!--for each starts here-->
            <div class="col-md-6">
                <!--block here-->
            </div>
            <div class="col-md-6">
                <!--block here-->
            </div>
            <div class="col-md-6">
                <!--block here-->
            </div>
            <!--so on-->

        </div>

    </div>

    <div class="col-md-4">

        <!--always visible block-->

    </div>

</div>

Take a look at the live example. The problem that I'm facing with is that each panel has different height and may change its height dynamically, so when it happens each panel starts jump from one place to another. And I want to remove those white vertical spaces between panels, more precisely I want to make it look like a mosaic. Is there a way how to do it using only bootstrap without any additional plugins and things like that?

Thanks in advance!

m4n0
  • 29,823
  • 27
  • 76
  • 89
user3673623
  • 1,795
  • 2
  • 12
  • 18
  • Dude, I had a problem similar to yours and asked here but no one helped me. Also, I got downvotes for what I asked. Finally, I found this awesome framework and started doing from scratch. Use masonry. http://masonry.desandro.com/. I hope this will help you. – Ionut Necula Sep 15 '15 at 09:41
  • 1
    You can make a three column grid and place your content inside each columns [fiddle](https://jsfiddle.net/DTcHh/12114/) – slashsharp Sep 15 '15 at 09:43
  • Syahrul i cant use it, because panels add in for each loop, so i just will not be able to make this html structure in for each – user3673623 Sep 15 '15 at 09:49

0 Answers0