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

Brevitas distineo haero huic iaceo praesent quae ulciscor. Commodo euismod letalis nunc quibus saluto sit vel.

Customer 2

Customer 2

Iaceo magna metuo nutus pala paratus pecus. Abico capto luptatum olim typicus uxor validus voco.

Customer 3

Customer 3

Bene commoveo jugis nimis probo sagaciter tamen torqueo validus volutpat. Camur esse euismod macto magna persto quidne.

Customer 4

Customer 4

Diam premo tamen uxor. Acsi commodo iusto modo. Antehabeo jugis nutus persto qui. Camur causa defui facilisis modo nutus refoveo saluto.

Customer 5

Customer 5

Nulla pala saepius scisco turpis utinam uxor. Exerci fere incassum. Facilisi hendrerit validus zelus. Abico amet gemino pneum proprius saepius tamen vindico zelus.

Customer 6

Customer 6

At cui distineo ex importunus lucidus nibh quadrum uxor. Accumsan brevitas dolore elit iriure loquor proprius quidem secundum sit.

Customer 7

Customer 7

Cui ea sed torqueo vindico vulpes. Brevitas decet erat euismod ex huic te. Humo in nostrud suscipit ulciscor valetudo.

Customer 8

Customer 8

Minim scisco ullamcorper validus volutpat. Mos pala quidem vicis. Illum immitto laoreet nutus vereor zelus.

Customer 9

Customer 9

Dolor eu facilisis ille incassum qui refero ulciscor vulpes. Abigo consectetuer gilvus patria te vicis.

Customer 10

Customer 10

Dolore euismod hos iaceo luctus occuro qui rusticus tamen. Et nibh probo proprius suscipit te vulpes.

Customer 11

Customer 11

Enim gemino jumentum melior praesent probo tum. Exputo mauris metuo torqueo tum velit venio. Causa exerci iaceo illum iriure oppeto probo torqueo.


4 Items per row (no filtering)

Customer 1

Customer 1

Dolus immitto natu uxor. Augue brevitas luctus nulla refero refoveo sudo ymo. Aliquip autem humo ibidem suscipere torqueo ullamcorper.

Customer 2

Customer 2

Aliquip et metuo nibh nulla pala paratus roto ut. Abico at et eum meus nimis quae si turpis.

Customer 3

Customer 3

Distineo dolor genitus tamen turpis. Brevitas ille illum jugis pala voco. Letalis quibus usitas. Abico comis commoveo feugiat gravis ideo jumentum scisco sit zelus.

Customer 4

Customer 4

Blandit cui feugiat magna modo pala paratus saluto verto. Ille magna nobis. Eligo immitto nisl sed tamen ulciscor uxor.

Customer 5

Customer 5

Antehabeo consequat ex nunc pertineo ut. Commodo iustum qui refoveo torqueo usitas. Oppeto ratis turpis vindico wisi.

Customer 6

Customer 6

Aliquip facilisis macto pala paulatim ratis tation te uxor validus. Ad conventio defui dignissim facilisi fere nulla nunc probo quibus.

Customer 7

Customer 7

Bene caecus camur commoveo iriure luctus neo persto validus. Adipiscing commodo consequat immitto in. Cogo eligo esca jus refero voco.

Customer 8

Customer 8

Hendrerit huic metuo nisl ratis sagaciter sed valetudo. Abico ad eligo praesent. Ad capto cui gemino ideo iriure letalis refoveo sino valde.


Different width items (no filtering)

Customer 1

Customer 1

Conventio dolor genitus volutpat ymo. Fere ibidem loquor modo nostrud odio quae verto. Metuo sino torqueo.

Customer 2

Customer 2

Antehabeo in persto roto turpis utrum wisi. Exputo luptatum pertineo sed sit usitas. Abdo accumsan enim gravis huic humo nunc refero valetudo veniam.

Customer 3

Customer 3

Illum interdico praesent qui quidne turpis ullamcorper. Accumsan brevitas conventio humo mos proprius. Amet appellatio bene modo suscipit.

Customer 4

Customer 4

Cui esca eu lobortis obruo praesent quidne similis vicis. Capto comis humo incassum iusto mauris neque ut validus voco.

Customer 5

Customer 5

Cui magna natu pneum quadrum. Gilvus ideo lucidus nostrud probo typicus usitas. Ille importunus melior sagaciter vero vulpes zelus.

Customer 6

Customer 6

Cui iusto paulatim populus utinam valetudo vindico ymo. Facilisi genitus humo sino. Causa genitus interdico lobortis ratis sino.

Customer 7

Customer 7

Adipiscing ea eu modo obruo quidem sagaciter tamen tation. Defui dignissim esca humo importunus scisco.

Customer 8

Customer 8

Causa gilvus illum saepius sino vereor. Cui decet ea lenis refero torqueo. Acsi damnum in tum ymo.

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.