Masonry
Create, filter and sort magical layouts with the power of Isotope.
Masonry layouts are using the Bootstrap grid system for creating columns and organizing content. The starter template you have to use in order to get a masonry layout is the following:
Quick start
For sizing the columns you have to use Bootstrap's .col-* classes with values from 1 to 12.
Example
<div class="masonry-container">
<div class="row masonry">
<div class="masonry-item col-sm-6">
...
</div>
</div>
</div>
Sorting
You can easily sort through the masonry items by adding filter names on top of a item as bellow, where branding is name of the filter:
Example
<div class="masonry-container">
<div class="masonry-filter-menu link-menu link-menu--style-1">
<a class="btn-filter" data-filter="*">Show all</a>
<a class="btn-filter" data-filter="branding">Branding</a>
<a class="btn-filter" data-filter="identity">Identity</a>
</div>
<div class="row masonry">
<div class="masonry-item col-sm-6 branding">
...
</div>
<div class="masonry-item col-sm-6 identity">
...
</div>
</div>
</div>;