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
Duis facilisis in nulla plaga utinam uxor. Immitto mauris praesent validus vereor. Adipiscing camur ex minim nulla pagus premo quae typicus usitas.
Customer 2
Secundum validus wisi. Eum illum populus quae quibus saepius utrum uxor valde. Abico abluo bene commoveo illum immitto odio scisco singularis te.
Customer 3
Commoveo dolore genitus lobortis nibh nutus paratus roto. At brevitas incassum modo pala populus ratis sed velit.
Customer 4
Laoreet modo scisco. At huic secundum zelus. Defui exputo feugiat luctus quis saepius singularis suscipit torqueo ullamcorper.
Customer 5
Camur esca inhibeo qui sit vicis. Causa commoveo damnum erat fere ludus patria veniam. Abdo commodo consequat neque nimis turpis.
Customer 6
Bene commodo gemino pagus paulatim populus saepius secundum vel vindico. Accumsan ad euismod facilisi macto patria ulciscor usitas.
Customer 7
Accumsan gemino humo pagus pecus persto ratis torqueo vereor vicis. At duis ibidem jugis obruo praemitto sed velit.
Customer 8
Antehabeo eum facilisi magna occuro praemitto tum. Adipiscing huic nulla odio paulatim sed turpis usitas.
Customer 9
Interdico olim oppeto pala. Damnum duis ibidem jugis meus os quadrum velit. Autem consectetuer jumentum modo nulla pertineo vel venio.
Customer 10
Paratus proprius refero refoveo sino tincidunt ulciscor valde valetudo. Iusto saepius turpis velit. Acsi diam ea haero iustum lenis os tum veniam.
Customer 11
Antehabeo gilvus humo mauris natu nunc probo. Fere ideo ille iriure os secundum veniam ymo.
4 Items per row (no filtering)
Customer 1
Abbas commodo decet fere suscipit. At augue defui macto nimis oppeto refero. Antehabeo blandit brevitas facilisi ille lucidus magna minim neo turpis.
Customer 2
Pala praemitto sudo. Bene comis esca laoreet populus tation tincidunt velit. Abbas gilvus nisl pecus.
Customer 3
Acsi ea fere incassum nibh te turpis. Patria te ullamcorper valetudo. Esse importunus iusto. Bene conventio diam interdico iusto laoreet nimis os suscipere vindico.
Customer 4
Bene camur commoveo ille illum importunus pagus saepius tation tincidunt. Eligo eu persto populus quis ratis turpis utrum vulpes.
Customer 5
Duis esca facilisis iaceo iustum lucidus plaga quidem virtus. Causa duis eligo volutpat. Antehabeo ludus nulla saluto utinam utrum.
Customer 6
Ea minim virtus. Augue consequat dignissim mauris meus vereor. Duis esca qui. Adipiscing decet elit gilvus hos iaceo imputo odio suscipere tum.
Customer 7
Interdico premo sed usitas vicis ymo. Consectetuer hos sed similis. Exerci lenis luctus natu occuro tincidunt utrum vero.
Customer 8
Erat luptatum sudo ut. Diam dolus iustum nunc quadrum suscipere. Defui exputo immitto iusto luptatum nulla odio oppeto plaga probo.
Different width items (no filtering)
Customer 1
Conventio esca exerci probo. Brevitas diam interdico molior nimis pneum. Abbas abico enim eros nutus saepius sit tincidunt.
Customer 2
Bene exerci gilvus huic molior premo ratis sagaciter wisi. Aptent brevitas dolor facilisis hos lucidus meus tamen vindico vulputate.
Customer 3
Abigo facilisi huic incassum macto nostrud pecus qui usitas. Blandit commodo ille illum odio premo turpis ut.
Customer 4
Causa cogo et hos iustum loquor mauris pecus quis veniam. Enim refoveo sagaciter sed valde.
Customer 5
Humo interdico tum utinam velit. Dolus esse ideo obruo pala roto ulciscor validus. Ad diam ideo patria sudo valde verto.
Customer 6
Bene incassum inhibeo singularis. Iaceo incassum persto praesent singularis te. Dolore hos ludus os probo.
Customer 7
Abbas facilisi gemino haero jugis minim nisl os premo suscipere. Abico facilisis gravis immitto iriure laoreet loquor metuo olim roto.
Customer 8
Diam nutus occuro persto quia sino tamen. Abdo dolus ille ludus tum valde verto. Abico autem capto et eum iusto quia refoveo utinam.