Geek Answers Handbook

How can I create a tile layout in bootstrap

I use bootstrap 3 for my site where I have numerous posts. right now I'm using columns and loading bars to display a message on an index page.

But I want to display the same tiles as the Pinterest page.

Is there a way to do this in bootstrap 3. Now my layout looks something like

<div class="row product-list"> <?php getList(); ?> </div>

where the function receives a list of messages. and displayed on the panel, for example

 <a href="product-des.php?1"> <div class='col-xs-12 col-sm-4 col-md-3 col-lg-3'><div class='panel panel-warning'> <div class='panel-heading'>Microsoft Lumia 575</div> <div class='panel-body'> <img class='product_listing_img img-responsive' src=files/uploaded_images/mobile-2.jpg></div> </div> </div> </a>

current view

enter image description here

expected view

enter image description here

+5
source share
2 answers

If your posts are the same height, you can use the col-md-* classes for fragments enclosed inside row . Each line will contain messages based on the number of messages you want.

 <div class="row"> <div class="col-md-2">Title Test</div> <div class="col-md-2">Title Test</div> <div class="col-md-2">Title Test</div> <div class="col-md-2">Title Test</div> <div class="col-md-2">Title Test</div> <div class="col-md-2">Title Test</div> </div>

If posts have a variable height, I suggest you use a plugin like masonry

See an example here for dynamic elevation tiles: http://masonry.desandro.com/layout.html#imagesloaded

Basic CSS Example

Demo: http://jsfiddle.net/tQANc/590/

CSS

 #container { width: 100%; max-width: 700px; margin: 2em auto; } .cols { -moz-column-count:3; -moz-column-gap: 3%; -moz-column-width: 30%; -webkit-column-count:3; -webkit-column-gap: 3%; -webkit-column-width: 30%; column-count: 3; column-gap: 3%; column-width: 30%; } .box { margin-bottom: 20px; height:100px; background:#BFBFBF; }

HTML:

 <div id="container" class="cols"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
+8
source

An old question, but I came across this while looking for the same problem, so I am posting the answer to others who are facing this.

Add Bootstrap v4 and use the functionality of Cards, http://v4-alpha.getbootstrap.com/components/card/

A backward compatibility note when using v4 rather than v3, it broke a lot of layouts when I tested. Therefore, in order to use the functionality of the “Map” without having to redo many of your layouts, add a CSS file to your page so that you use v3 and v4 next to each other. Make sure v4 is the first and v3 is the last on the page in that order, so v3 takes precedence when the browser loads them.

+3
source

More articles:


All Articles