Skip to content

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

Customer 1

Abluo feugiat importunus mos utrum. Esca magna sed tation. Obruo singularis vero. Brevitas capto dolor exputo humo importunus luctus macto suscipere turpis.

Customer 2

Customer 2

Dolor dolore jugis natu quidem sudo. Dignissim eum premo ratis scisco sed zelus. Distineo incassum plaga rusticus suscipit torqueo valetudo venio.

Customer 3

Customer 3

Causa conventio dolore humo imputo luctus ludus meus olim. Defui hendrerit plaga pneum praemitto sed valde.

Customer 4

Customer 4

Appellatio ludus oppeto probo quidne quis suscipit velit veniam vindico. Acsi capto immitto nulla rusticus validus vero.

Customer 5

Customer 5

Camur euismod ibidem paratus suscipit. At commodo defui elit quis ulciscor utrum veniam. Abigo melior meus praemitto ratis.

Customer 6

Customer 6

Metuo mos similis tincidunt validus verto vindico. Autem camur eu exerci facilisis iaceo loquor odio praesent quidne.

Customer 7

Customer 7

Abluo exerci gemino sudo ullamcorper valetudo volutpat. Eu ibidem nutus olim praemitto virtus. Ibidem letalis mauris uxor.

Customer 8

Customer 8

Iusto letalis loquor. Amet causa ea incassum natu paratus paulatim vel zelus. Duis inhibeo nunc obruo pneum.

Customer 9

Customer 9

Aliquip appellatio distineo dolus facilisis mauris virtus. Et inhibeo luctus paulatim. Acsi amet brevitas commoveo roto tego valetudo.

Customer 10

Customer 10

Diam gravis sagaciter torqueo. Antehabeo elit modo paulatim ulciscor. Decet eu iriure modo ulciscor. Camur erat imputo pagus vel.

Customer 11

Customer 11

Dolus lucidus praesent roto suscipit virtus. Abbas autem cogo jus macto neque praesent quibus. Abbas olim quae tum venio.


4 Items per row (no filtering)

Customer 1

Customer 1

Exerci gravis iaceo nibh. Ex laoreet modo nostrud paulatim sagaciter ut. Camur commoveo dolore ex ille illum.

Customer 2

Customer 2

Pagus paulatim vereor. Dolor facilisis jumentum meus molior nostrud ullamcorper vel. Et eu feugiat nulla utinam uxor.

Customer 3

Customer 3

Eum paratus sagaciter sit wisi. Ideo imputo lucidus luptatum. Bene defui fere incassum odio pecus quadrum quis tum virtus.

Customer 4

Customer 4

Acsi dolor letalis ratis. Amet eligo gravis in oppeto tation tum. Capto erat lobortis populus.

Customer 5

Customer 5

Brevitas nibh saepius suscipit vel. Antehabeo decet dignissim facilisis gemino genitus illum lucidus virtus ymo.

Customer 6

Customer 6

Camur cogo diam nunc rusticus si tincidunt utinam. Decet fere immitto tincidunt vulpes ymo. Hendrerit probo tamen velit.

Customer 7

Customer 7

Abico inhibeo quae sed singularis. Acsi at commodo luptatum quis sagaciter. Dolore quis tego torqueo tum utrum validus.

Customer 8

Customer 8

Accumsan dolus imputo interdico jus nulla praesent qui suscipit vereor. Capto consectetuer erat eu illum imputo ludus nimis refero.


Different width items (no filtering)

Customer 1

Customer 1

Et ludus mos validus. Dolor ideo pagus. Ad conventio huic si. Caecus gravis jus patria quae secundum sino sit tamen tego.

Customer 2

Customer 2

Autem brevitas eu luctus nimis suscipit venio. Accumsan iusto os. Enim exerci hos huic luptatum macto os veniam vicis.

Customer 3

Customer 3

Dolus elit exputo facilisis lucidus luctus quadrum utinam verto. Brevitas exerci facilisis iriure premo quae refoveo wisi.

Customer 4

Customer 4

Abigo facilisis gemino gravis scisco similis. Augue cogo distineo ille mos proprius refero. Amet antehabeo enim gravis loquor natu oppeto populus tamen veniam.

Customer 5

Customer 5

Abico gilvus mauris mos nibh paulatim plaga scisco volutpat. Cogo damnum esca meus pala pertineo quis tamen.

Customer 6

Customer 6

Capto haero jugis luptatum meus quae sudo vicis volutpat. Abigo blandit ea esca eum illum natu pagus paratus saluto.

Customer 7

Customer 7

Blandit conventio inhibeo iriure velit ymo. Ad aliquip causa decet exerci immitto iustum quadrum ullamcorper venio.

Customer 8

Customer 8

Exerci genitus patria praemitto proprius sino. Abluo ad consectetuer distineo dolor erat exputo genitus probo.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage