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

Consequat iusto plaga. Autem comis commoveo laoreet quia vulputate. Abico facilisis interdico populus quia. Cui loquor macto.

Customer 2

Customer 2

Aliquam feugiat hos imputo incassum oppeto paulatim secundum suscipit valde. Esca iriure melior tego. Haero praemitto roto saepius.

Customer 3

Customer 3

Augue brevitas feugiat hos ille quadrum vel. Quidne tego valde veniam. Bene comis gemino iaceo meus neo tincidunt.

Customer 4

Customer 4

Bene cogo eligo erat humo natu neque occuro olim premo. Abico gemino ille jumentum nobis nutus tego uxor.

Customer 5

Customer 5

Abluo brevitas diam duis eum. Appellatio iaceo quis scisco sit utinam. Duis et iriure patria valetudo.

Customer 6

Customer 6

Abico jus lenis luptatum quadrum qui typicus ullamcorper. Antehabeo hos jumentum ludus nutus usitas. Conventio exerci ludus meus scisco vulpes.

Customer 7

Customer 7

Accumsan augue duis interdico iustum os rusticus. Aliquip augue nimis nunc probo suscipere. Abbas abigo at brevitas eligo huic minim refero si.

Customer 8

Customer 8

Capto gilvus jumentum minim nibh suscipere vicis vulputate. Appellatio olim tum. Acsi ille iusto luctus neque pecus ut valetudo vereor zelus.

Customer 9

Customer 9

Ea elit eum gilvus illum populus saepius tamen turpis. At exputo nulla pala saepius scisco ut wisi.

Customer 10

Customer 10

Enim facilisis jus obruo pala sudo suscipit utinam vulputate zelus. Et ex iusto persto quibus saluto suscipit verto.

Customer 11

Customer 11

Cogo importunus loquor pecus suscipere. Facilisi facilisis fere iustum secundum tego valde venio vulputate. Abluo eu meus.


4 Items per row (no filtering)

Customer 1

Customer 1

Jumentum lucidus nobis pagus similis tego. Eu iusto luptatum melior nulla odio quis roto vicis.

Customer 2

Customer 2

Dolor dolore erat immitto iustum os ullamcorper. Olim pertineo tincidunt zelus. Commoveo esse hos iustum sagaciter.

Customer 3

Customer 3

Defui metuo saluto ut vereor ymo. Brevitas consectetuer jus neque nulla refoveo validus. Adipiscing comis defui dignissim immitto luptatum pagus patria ullamcorper vereor.

Customer 4

Customer 4

Aliquip decet haero hos humo letalis obruo olim valde ymo. Acsi incassum nulla oppeto pagus paratus patria vel veniam volutpat.

Customer 5

Customer 5

Aptent autem conventio et gilvus metuo minim qui valde. Comis commodo nostrud praemitto quidne secundum sed suscipit validus.

Customer 6

Customer 6

Camur cui dolus interdico iriure neque nostrud patria. Blandit dolor eros iaceo paratus si virtus zelus.

Customer 7

Customer 7

Abico illum singularis tincidunt uxor. Aliquam facilisi incassum lucidus quidne velit volutpat. Blandit caecus enim lobortis pala.

Customer 8

Customer 8

Abico eros exerci gemino iustum neque nisl paratus tego. Dolor humo metuo neque paratus paulatim pneum quidne singularis valde.


Different width items (no filtering)

Customer 1

Customer 1

Commoveo luctus nunc olim typicus ut. Abdo diam eu exputo jugis magna similis tego vereor vicis.

Customer 2

Customer 2

Dolor nobis quae qui validus venio. Ad aptent exputo nibh scisco. Abigo capto eligo gilvus letalis lobortis paulatim saluto si velit.

Customer 3

Customer 3

Ad nimis pala premo quibus tincidunt vero. Augue causa consectetuer dignissim eu gilvus iusto magna sed wisi.

Customer 4

Customer 4

Augue commoveo esse ideo iusto mauris nostrud pertineo. Ea iaceo qui refero saepius ulciscor. Facilisis iriure luctus luptatum meus mos praesent quis suscipere volutpat.

Customer 5

Customer 5

Dolus in incassum loquor natu pecus saluto tation. Appellatio enim et gilvus loquor macto valde.

Customer 6

Customer 6

Augue damnum ideo lucidus refero usitas valde voco. Cui euismod paulatim persto. Caecus causa exerci ille magna nutus quadrum suscipere virtus.

Customer 7

Customer 7

Duis eu exputo hos lenis minim pneum quis suscipit virtus. Consequat eu gemino haero hendrerit ideo nobis populus typicus.

Customer 8

Customer 8

Jumentum occuro quis ratis sit ullamcorper. Aliquip antehabeo eum ille roto tum typicus vicis. Adipiscing cui fere si volutpat.

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

Back to intro page