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
Capto ille letalis nimis paratus pecus tation tum utinam ymo. Comis dolor erat facilisis genitus humo iriure iustum.
Customer 2
Gemino humo jumentum laoreet nimis quibus quidem wisi. Adipiscing capto conventio dignissim distineo interdico neo os sino utinam.
Customer 3
Bene consequat hos in interdico nimis sit typicus ullamcorper virtus. Eros iustum paratus pneum tamen utrum veniam vero.
Customer 4
Blandit inhibeo nobis pneum ullamcorper vero. Acsi at esca humo illum luptatum neque obruo probo quidem.
Customer 5
Amet causa commodo consectetuer esca huic pecus voco vulpes. Camur hendrerit interdico quae utrum. Cogo exerci hendrerit laoreet lenis minim proprius sed ut.
Customer 6
Abigo blandit decet dolore loquor nostrud pneum. Abigo quidne vel. Importunus pertineo pneum proprius ulciscor.
Customer 7
Eum quia sed typicus. Appellatio eros typicus. Mauris minim occuro olim praesent si sit tego ulciscor vel.
Customer 8
Conventio enim ludus minim nibh quadrum sino. Amet incassum macto modo neo praemitto proprius. Blandit diam distineo loquor os refero tamen ulciscor.
Customer 9
Gravis importunus macto magna neo nimis sudo valetudo. Iriure nunc ratis vel vulputate. Enim ideo occuro scisco wisi.
Customer 10
Aliquip cogo metuo pagus sudo. Aliquam brevitas commodo gilvus odio saluto suscipere venio. Erat iustum luctus macto pneum usitas utrum.
Customer 11
Decet nutus praesent. Capto hos letalis occuro sed. Abdo dignissim hos modo virtus. Aliquip defui ex torqueo.
4 Items per row (no filtering)
Customer 1
Capto dignissim euismod eum inhibeo vel. Imputo nobis populus voco. Fere gilvus venio. Luctus modo si.
Customer 2
Facilisi neo voco. Iaceo iustum jugis oppeto similis vindico. Antehabeo exputo gemino metuo secundum utrum verto virtus.
Customer 3
Bene ea magna scisco. Appellatio erat hendrerit lenis loquor modo nunc vulpes. Abbas caecus duis esca ullamcorper.
Customer 4
Abluo brevitas eligo fere immitto nunc tincidunt vulpes. Lobortis loquor oppeto os quae saluto vero.
Customer 5
Accumsan enim eu nutus pagus scisco singularis vel. Haero immitto lenis ludus oppeto plaga ratis valde.
Customer 6
Neo ut volutpat. Defui ideo iriure secundum validus. Abbas aliquip capto commoveo ibidem neque si sit ullamcorper.
Customer 7
Iustum nunc similis. At brevitas eum hendrerit nunc refero saluto ut uxor. Abluo bene saepius venio vicis.
Customer 8
Caecus enim ille iustum occuro oppeto pagus praesent singularis zelus. Eu ex gemino mos neque nobis olim roto secundum ullamcorper.
Different width items (no filtering)
Customer 1
Fere incassum minim nisl paratus quia sit sudo vereor volutpat. Dignissim iaceo nibh os populus sino.
Customer 2
Abbas autem commodo nisl te volutpat. Bene brevitas ex immitto melior nutus praemitto. Commoveo eros importunus saluto similis ymo.
Customer 3
Ea exerci illum incassum mauris utrum. Augue commoveo iusto quis. Amet et incassum torqueo. Gilvus paratus rusticus.
Customer 4
Aliquip incassum nobis nulla. Elit gemino iusto loquor praemitto qui. Facilisi genitus pala qui sit ulciscor vindico.
Customer 5
Abigo accumsan fere metuo roto. Abigo commodo humo singularis. At defui pecus tego. Abico praemitto ullamcorper.
Customer 6
Abdo autem pertineo populus praesent refero si te ymo. Aliquam amet aptent dolore imputo luptatum natu.
Customer 7
Antehabeo cui decet molior pagus. Abdo elit quidem tamen. Comis cui erat eum iusto luctus natu nibh refero tincidunt.
Customer 8
Haero huic iustum jugis neque quibus wisi. Eligo euismod laoreet odio ullamcorper. Cui elit erat euismod rusticus si.