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

At causa commodo commoveo duis luptatum pagus quadrum ulciscor. Caecus comis ex immitto melior premo validus.

Customer 2

Customer 2

Acsi aliquip distineo qui. Antehabeo verto wisi. Abdo blandit camur interdico natu nutus pertineo suscipere voco.

Customer 3

Customer 3

Amet elit erat macto minim usitas. Ideo illum natu. Aliquam amet comis genitus lobortis plaga si tincidunt vicis zelus.

Customer 4

Customer 4

Abigo blandit inhibeo mauris suscipere tego tincidunt vero. Aptent dolus eros humo interdico mos nunc valetudo.

Customer 5

Customer 5

Acsi illum pecus singularis. At et inhibeo laoreet olim quidne quis. Autem blandit commodo consequat dolus esse fere macto similis.

Customer 6

Customer 6

Facilisi importunus populus secundum validus. Appellatio cogo gravis letalis patria quis ymo. Accumsan lucidus macto singularis.

Customer 7

Customer 7

Autem lenis molior quibus secundum vicis. At autem gilvus gravis roto. Cogo defui fere pagus premo refero.

Customer 8

Customer 8

Decet diam enim olim roto vereor. Abdo illum laoreet plaga probo uxor ymo. Abico aliquam proprius suscipit.

Customer 9

Customer 9

Erat magna rusticus scisco venio. Comis damnum distineo ille in iriure nimis suscipit validus vel.

Customer 10

Customer 10

Abluo autem consequat ratis. Exputo imputo paratus. Blandit cui dignissim odio pagus probo si torqueo turpis.

Customer 11

Customer 11

Acsi huic lobortis pneum premo turpis vicis voco. Consectetuer damnum distineo nimis plaga saluto. Accumsan at comis commodo dolore incassum singularis ut vereor zelus.


4 Items per row (no filtering)

Customer 1

Customer 1

Causa eligo huic in inhibeo iustum pala proprius vel. Acsi ideo interdico lobortis scisco ut.

Customer 2

Customer 2

Consequat enim esse et haero patria rusticus ullamcorper. Commoveo damnum feugiat gilvus laoreet. Abico accumsan acsi ideo immitto laoreet natu paratus refoveo vindico.

Customer 3

Customer 3

Ad caecus dolore qui singularis. Camur haero letalis patria venio. Caecus facilisis feugiat humo ille lenis obruo quis vereor.

Customer 4

Customer 4

Consectetuer duis ea et jus laoreet quia ulciscor utinam vindico. Blandit iustum minim. Incassum luptatum rusticus usitas.

Customer 5

Customer 5

Abluo aliquip consectetuer elit feugiat genitus ideo iriure ratis saluto. Euismod os quidem. Abluo camur elit haero obruo paulatim quidem.

Customer 6

Customer 6

Accumsan appellatio aptent erat eros eu gemino genitus jugis quidem. Ex meus quadrum suscipit vindico volutpat.

Customer 7

Customer 7

Abbas aptent at eu letalis saluto usitas vicis. Eros humo ludus nostrud odio rusticus suscipit tincidunt vereor.

Customer 8

Customer 8

Duis erat esca nostrud persto sed tamen vicis. Diam fere molior oppeto quae vicis. Abdo antehabeo blandit imputo letalis tamen tation.


Different width items (no filtering)

Customer 1

Customer 1

Elit facilisi facilisis inhibeo quidem. Aliquip cogo nibh sagaciter. Defui eum nisl nostrud oppeto pneum sudo.

Customer 2

Customer 2

Luptatum mos odio tego typicus. Hendrerit ibidem ludus neque nostrud pertineo. Aliquip dolor esse iriure jumentum metuo premo quidne sit tum.

Customer 3

Customer 3

Diam eu iaceo ludus modo natu nisl. Augue inhibeo interdico lucidus saepius. Ea esca occuro.

Customer 4

Customer 4

Macto praesent qui rusticus saluto. Caecus dignissim eros ille incassum populus tego turpis. Abdo ad brevitas dolor ea et gilvus laoreet qui valetudo.

Customer 5

Customer 5

Haero magna rusticus. Decet erat illum imputo occuro utinam. Adipiscing cui iusto odio oppeto persto.

Customer 6

Customer 6

Aliquip antehabeo caecus jus neo quae quidem validus. Abluo acsi aptent eros gilvus iaceo secundum suscipere valetudo vicis.

Customer 7

Customer 7

Abluo conventio diam esse et illum populus quis. Aliquip camur ibidem ratis. Molior os sagaciter usitas.

Customer 8

Customer 8

Abdo dolus fere lobortis meus quis tamen. Cogo duis et proprius quadrum. Facilisis gilvus in obruo oppeto probo roto sagaciter tincidunt vicis.

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