Mithun Raikar Mithun Raikar - 3 months ago 83
CSS Question

How can i create tile layout in bootstrap

I am using bootstrap 3 for my site, where i have numerous posts. right now i am using bootstrap columns and panels to display the post in index page.

But i want to show the same posts in tile view like Pinterest page.

Is there any way to do that in bootstrap 3. Right now my layout looks something like

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


where the function gets the list of posts.
and displayed in panel like

<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

K K K K
Answer

If your posts are of same height then you can use the col-md-* classes for the tiles wrapped inside a row. Each row will have posts based on the number of posts 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 the posts are of variable height then I will suggest you to use a plugin like masonry

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

A basic example using CSS

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>
Comments