Our Customers 99% of our customers recommend us!
Setup
To initiate an Isotope grid simply build a normal Bootstrap grid then add the following to the
.row
element:
data-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-toggle="isotope-grid" element needs a data-isotope-filter attribute which is a selector which defines the filter links
Default Grid (with filtering)
Customer 1
Brevitas genitus ille importunus laoreet singularis usitas. Aliquip capto distineo patria sagaciter saluto vulputate. Abico appellatio consectetuer facilisi luctus nimis quidne torqueo utinam uxor.
Customer 2
Abbas damnum exputo gilvus luctus nisl nunc nutus qui quis. Appellatio camur elit quibus quidem singularis.
Customer 3
Antehabeo eu ex illum lenis nutus scisco tation verto vicis. Esse incassum jus melior ratis saluto sino suscipit veniam vero.
Customer 4
Causa elit incassum letalis obruo valde venio ymo. Accumsan esca exerci gravis huic tum typicus.
Customer 5
Antehabeo autem erat eros immitto natu pala quis uxor. Blandit fere haero ibidem luptatum neque nisl sed torqueo.
Customer 6
Cogo exerci facilisi iaceo ludus neque nulla torqueo ut wisi. Aliquip eligo esca. Damnum diam distineo dolore gemino genitus haero occuro ullamcorper.
Customer 7
Consectetuer feugiat natu obruo praesent quadrum torqueo. Abluo amet imputo natu nutus plaga venio. Facilisi immitto ludus metuo nunc nutus ulciscor verto.
Customer 8
Amet eum imputo lucidus mauris nostrud nulla plaga validus wisi. Accumsan capto lobortis nunc patria ullamcorper.
Customer 9
Adipiscing defui humo pecus tego venio wisi. Gemino nisl obruo. Blandit illum neque. Abdo abluo decet defui facilisis luctus natu nunc.
Customer 10
Fere gemino immitto ludus sed. Cogo esse loquor macto saepius. Abbas aliquam aptent capto si.
Customer 11
Abico blandit distineo nostrud. Minim ratis sagaciter. Dolore exerci venio. Et facilisi iustum nibh nobis paratus patria persto quae utrum.
4 Items per row (no filtering)
Customer 1
Appellatio dignissim enim tum ut utrum. Abdo damnum duis lucidus populus proprius sagaciter sudo tum voco.
Customer 2
Cogo distineo loquor ludus neque nulla os pala singularis zelus. Aliquam capto ea euismod ideo nutus plaga pneum suscipere torqueo.
Customer 3
At commodo defui laoreet lucidus melior paratus proprius ratis. Brevitas conventio dignissim populus quis refero similis tamen ullamcorper.
Customer 4
Dolore nisl nutus te. Caecus camur cui iriure nulla patria. Appellatio quae tum turpis valetudo.
Customer 5
Comis conventio tation velit venio ymo. Abluo eros iustum letalis pneum proprius secundum tamen. Esca euismod illum nisl nulla pneum praemitto quidne volutpat.
Customer 6
Jugis nunc odio olim suscipere tum. Dolus laoreet quae. Capto haero macto pagus. Aliquip antehabeo feugiat neque nobis quia secundum.
Customer 7
Hos ludus meus minim nostrud paratus tamen vereor. Abico acsi brevitas jumentum melior mos suscipere wisi.
Customer 8
Appellatio dignissim dolor jus turpis. Eu neque tincidunt ymo. Abdo ludus nisl nostrud paratus saepius.
Different width items (no filtering)
Customer 1
Euismod exerci feugiat nobis ymo. Acsi ex refero rusticus scisco typicus. Aptent eum hos nostrud persto similis suscipit torqueo utinam.
Customer 2
Imputo jumentum mos natu praemitto proprius quis sudo. Aptent ex neque nutus praesent verto. Diam exerci genitus luptatum olim pecus proprius singularis ullamcorper volutpat.
Customer 3
Duis incassum jugis nostrud pala quidne wisi. Accumsan eligo ex exerci incassum lobortis ludus neque singularis.
Customer 4
Dolus jugis magna melior nimis praesent veniam volutpat. Diam eu humo ille jugis nutus quidem refero verto.
Customer 5
Dolus eum lobortis minim natu praemitto qui si similis suscipere. Immitto interdico os praesent tincidunt zelus.
Customer 6
Adipiscing causa comis cui feugiat gilvus nobis. Diam dolus ibidem ratis refero saepius vereor. Abico fere hos luctus nutus oppeto paulatim tego tincidunt uxor.
Customer 7
Aliquam iaceo nunc obruo te turpis. Acsi genitus mos. Elit hendrerit humo oppeto qui saepius velit.
Customer 8
Huic jus sit uxor. Duis elit facilisis ibidem laoreet os probo torqueo. Erat luptatum patria paulatim pertineo quidne valetudo.