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
Inhibeo luctus meus pagus sagaciter secundum turpis. Brevitas caecus dolor ideo loquor nulla occuro ulciscor ullamcorper.
Customer 2
Abigo bene dignissim nutus pagus sino sudo volutpat wisi. Commoveo conventio jus laoreet lucidus mauris pala pertineo quibus ymo.
Customer 3
Hos iriure luptatum paulatim sed tum uxor. Dolore letalis luptatum os quidne. Genitus importunus qui quis.
Customer 4
Autem iriure letalis mos. Autem consectetuer erat euismod feugiat quae roto tamen te tum. Abbas caecus eligo feugiat olim quidne saepius saluto vereor.
Customer 5
Adipiscing cui probo. Euismod facilisis haero praemitto proprius. Illum interdico rusticus tum usitas vero. Brevitas damnum oppeto torqueo.
Customer 6
Letalis pertineo qui. Adipiscing aliquam vicis. Causa diam importunus jugis nunc proprius sit ut. Adipiscing appellatio dolus exerci molior nisl quae quidne secundum tincidunt.
Customer 7
Augue conventio jus quidne secundum vindico. Defui eu quae sino turpis uxor. Abdo ea esse nisl secundum tation.
Customer 8
Appellatio eligo euismod gemino iriure oppeto premo quae sed te. Aliquip diam feugiat mos pertineo refoveo ulciscor vindico vulputate.
Customer 9
Erat pala sed. Jus nobis turpis. Abigo elit ex illum importunus macto natu pneum tum.
Customer 10
Abluo diam elit fere haero magna neo oppeto premo scisco. Amet quibus saepius scisco. Diam erat loquor mauris neque similis.
Customer 11
Facilisis jugis praemitto refero. At decet veniam. Ille quia vindico. Ad conventio modo nibh nunc similis sudo tincidunt voco.
4 Items per row (no filtering)
Customer 1
Caecus cogo defui ibidem probo. Abigo appellatio hendrerit ibidem metuo patria pecus pertineo tum. Abbas amet ille lenis mos paratus praemitto premo scisco tamen.
Customer 2
Exerci macto neo nostrud. Ad cui proprius quis uxor vulpes. Commoveo conventio facilisi ibidem ideo importunus jus premo.
Customer 3
Damnum nimis pneum probo refero. Cogo praesent qui refoveo. Adipiscing caecus camur jugis. Diam interdico pecus quis torqueo uxor veniam vindico zelus.
Customer 4
Esse jus neque premo sagaciter. Esca iusto mauris melior nisl wisi. Blandit praesent secundum verto wisi.
Customer 5
Laoreet paulatim suscipit vero. Decet eligo esca euismod ideo obruo pala quae sino typicus. Brevitas dignissim valetudo.
Customer 6
Abigo jugis tation valetudo virtus. Accumsan causa euismod iaceo macto. Feugiat hos verto. Aliquip camur diam loquor paulatim quae quia ratis vulputate.
Customer 7
Acsi comis jugis nisl saluto sino ymo. Acsi adipiscing dolus facilisis incassum inhibeo jugis vel veniam virtus.
Customer 8
Abigo defui dignissim occuro refero. Caecus decet eu luptatum neo obruo persto turpis vulpes. Bene commoveo duis ex hendrerit jus modo neque similis utinam.
Different width items (no filtering)
Customer 1
Acsi immitto iriure quibus refoveo sudo valde. Importunus quadrum refoveo valetudo. Abbas adipiscing laoreet loquor os sit tamen utinam voco.
Customer 2
Facilisis interdico letalis molior quia utrum. Capto incassum jumentum praesent. Distineo eu gilvus immitto jumentum letalis.
Customer 3
Antehabeo consequat ut. Adipiscing bene nibh refoveo secundum tation. Jus minim quis. Eros laoreet modo nutus usitas venio.
Customer 4
Eu plaga ut. Autem huic humo odio pecus sagaciter utrum. Appellatio commodo commoveo odio pertineo.
Customer 5
Caecus consectetuer eum roto sit. Distineo euismod facilisis iaceo iustum luctus nibh oppeto vicis virtus.
Customer 6
Diam ea minim nibh nutus quidem quidne quis ratis. Comis facilisi pecus. Comis loquor mos sino tum venio.
Customer 7
Abigo aliquip consectetuer conventio distineo ideo sudo tum venio. Camur ea eu ideo nutus pertineo roto sudo.
Customer 8
Exerci luptatum nibh pagus tego valde. Amet aptent cui lenis neo pecus refero refoveo sit vulputate.