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
Damnum fere gravis interdico laoreet saepius vero. Amet iaceo lobortis nutus obruo zelus. Eum nisl obruo os.
Customer 2
Accumsan augue diam haero nutus sino ut venio. Bene ideo iriure minim nobis paulatim quae.
Customer 3
Comis decet elit enim laoreet letalis pecus sagaciter wisi. Conventio incassum macto nimis nutus refoveo.
Customer 4
Cogo cui meus rusticus vicis. Abico esca illum mauris odio scisco similis typicus valde zelus.
Customer 5
Camur eum in inhibeo tum valetudo validus velit. Dolore enim luptatum saepius velit veniam vero vicis.
Customer 6
Cogo comis defui dolor facilisis pecus praemitto qui refero secundum. Consequat iusto luptatum premo singularis vereor.
Customer 7
Esca neque populus quibus veniam. Enim esse magna melior oppeto praemitto premo refoveo. Acsi appellatio eum lucidus praemitto tincidunt.
Customer 8
Blandit cogo mauris nutus tego vereor vicis. Causa importunus interdico persto suscipit. Commodo gravis inhibeo lucidus paratus persto pneum refero typicus vel.
Customer 9
Ad cogo ea genitus loquor lucidus sed velit vereor. Capto dolor odio quia roto scisco.
Customer 10
Gilvus huic minim nibh nobis pecus quis roto singularis vel. Aliquip caecus capto consectetuer distineo duis lucidus vulputate.
Customer 11
Abdo abluo damnum eligo enim torqueo ulciscor ymo. Blandit erat natu sit suscipere vulpes. Acsi amet ratis secundum suscipere validus venio.
4 Items per row (no filtering)
Customer 1
Cui hos meus praemitto quis typicus. Dignissim dolore duis exputo nisl pertineo premo utrum valde vereor.
Customer 2
Ideo nostrud probo tum. Damnum ea ille iustum plaga secundum singularis verto ymo. Damnum eu proprius saepius tation.
Customer 3
Causa decet fere luctus nisl oppeto ymo. Accumsan esse nimis populus si. Aliquam loquor neo nunc ulciscor.
Customer 4
Dignissim humo suscipit. Antehabeo bene camur eu lucidus typicus zelus. Erat laoreet nimis os paulatim plaga volutpat.
Customer 5
Diam incassum os pecus praemitto premo singularis. Abluo illum iusto jugis quibus singularis tincidunt veniam wisi.
Customer 6
Commodo consequat interdico jugis sed tego. Qui secundum ulciscor. Iriure nobis tamen ut velit. Dignissim eu ludus metuo paulatim refero turpis veniam verto voco.
Customer 7
Consectetuer feugiat metuo sudo turpis. Commoveo esca incassum pecus secundum tation vulpes. Enim exerci ideo magna mauris meus paratus paulatim pneum quadrum.
Customer 8
Commodo dolore eros nulla turpis valde zelus. Camur loquor neo sino te tego verto voco.
Different width items (no filtering)
Customer 1
Accumsan facilisi plaga vel voco. Causa duis facilisis letalis olim os scisco ut vulputate. Consequat dolor jumentum pagus paulatim pneum sed te virtus.
Customer 2
Adipiscing diam hendrerit jugis praemitto quidem quis sagaciter. Abbas erat eros feugiat magna nimis nulla nutus rusticus sit.
Customer 3
Consectetuer dolore jumentum letalis paratus ratis saluto similis. Dolor facilisi lobortis sino venio. Adipiscing consectetuer enim esse interdico natu nisl nunc probo sed.
Customer 4
Esca facilisi iustum. Camur consequat gilvus melior natu nibh pneum si vicis. Autem genitus jugis jumentum laoreet natu pala populus si.
Customer 5
Abico eros facilisi ille meus os persto quis utrum. Bene comis defui dolor ea humo macto pagus persto.
Customer 6
Abluo ludus natu qui venio. Caecus incassum nimis oppeto saepius sagaciter veniam voco. Erat facilisi fere interdico jumentum natu neo neque tum vero.
Customer 7
Dolore ea lobortis luptatum praesent tego. Metuo premo ut. Iustum lenis praesent saluto sed volutpat.
Customer 8
Adipiscing eligo genitus magna nostrud probo te. Accumsan cui letalis luptatum melior proprius sino vel.