Our Customers 99% of our customers recommend us!
Card Grid
Horizontal cards
Flat grid
Flat grid invert
Filterable Grid
Setup
To initiate an Isotope grid simply build a normal Bootstrap grid then add the following to the
.row
element:
data-bs-toggle="isotope-grid" data-isotope-options='{ "itemSelector": "GRID-ITEM-SELECTOR"}'
.
GRID-ITEM-SELECTOR
should be a class that represents the items within the grid, this class should be present on all grid items.
data-isotope-options
allows you to pass all Isotope plugin options available, see isotope.metafizzy.co for more information.
You can experiment with different grid item widths and even mix and match them as the bottom example shows.
Filtering items
1. Filters wrapper element requires an ID or unique class
2. The links also require a data-isotope-fid attribute which contains the class of the items to filter, this should match classes in the isotope items
3. Lastly your data-bs-toggle="isotope-grid" element needs a data-isotope-filter attribute which is a selector which defines the filter links