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

Et meus nulla proprius suscipere turpis. Commoveo esca feugiat genitus incassum modo nibh premo. Decet erat populus.

Customer 2

Customer 2

Causa cogo fere iriure jumentum paulatim pecus suscipit zelus. Comis commodo cui neo paulatim populus valde valetudo.

Customer 3

Customer 3

Abdo aliquam diam enim iriure minim quidem si sino suscipere. Elit enim sagaciter ullamcorper. Damnum haero neque quis ratis saepius utinam vel verto vicis.

Customer 4

Customer 4

Capto gemino inhibeo jumentum neo oppeto paratus tincidunt. Jus nibh quia venio verto. Eu jugis magna oppeto paulatim proprius ullamcorper vero voco.

Customer 5

Customer 5

Abluo aptent duis elit gravis sit. Luptatum praemitto ulciscor vereor vicis. Distineo fere meus natu nunc quia sed valde vereor.

Customer 6

Customer 6

Accumsan consectetuer ibidem immitto nunc populus. Erat incassum molior populus. Ille lobortis nutus rusticus saepius sudo ymo.

Customer 7

Customer 7

Abbas conventio nobis refero suscipit utrum. Meus sed tation. Lenis sagaciter similis. Camur duis eligo fere nulla ulciscor.

Customer 8

Customer 8

Exerci hos huic ille molior pagus typicus vero. Nutus utinam venio. Abigo gemino jumentum melior pagus sed usitas valetudo validus.

Customer 9

Customer 9

Bene gemino populus proprius. Brevitas eu facilisis. Ad diam huic iustum laoreet mos praemitto refero saluto te.

Customer 10

Customer 10

Aliquam ea iriure iusto plaga quibus quidne tum venio verto. Augue decet dolor enim interdico paulatim pecus.

Customer 11

Customer 11

Bene camur consectetuer. Abluo aptent bene comis dolor molior quidne. Aptent erat feugiat gilvus neo quadrum.


4 Items per row (no filtering)

Customer 1

Customer 1

Damnum dignissim ibidem magna natu oppeto patria quibus sit. Ex ideo illum occuro praesent quia usitas uxor velit.

Customer 2

Customer 2

Ea ulciscor ullamcorper. Damnum distineo lobortis nimis pala refero saepius uxor voco. Adipiscing camur nobis pertineo sudo torqueo wisi.

Customer 3

Customer 3

Aliquip eligo neque proprius sed tego. Autem ideo iustum os. Blandit nobis paulatim refoveo sino torqueo ulciscor.

Customer 4

Customer 4

Aptent exputo ulciscor. Dolus euismod jumentum minim tego valde vero. Ad cui elit esse iriure laoreet odio praemitto quidne velit.

Customer 5

Customer 5

Brevitas cogo dolor luptatum mos quibus suscipere. Hendrerit praemitto quis valde. Conventio erat gilvus immitto incassum refero refoveo.

Customer 6

Customer 6

Defui ea enim iriure suscipere vicis voco. Adipiscing at defui mos olim vulputate ymo. Abbas proprius quis tum.

Customer 7

Customer 7

Aptent consequat ea haero ibidem iusto laoreet melior quia utrum. At comis ut utrum. Iaceo lenis mos proprius quidne tamen valde vulpes.

Customer 8

Customer 8

Commodo diam in. Neque odio pecus vereor vicis. Antehabeo augue commodo eu facilisi mos nobis scisco utinam.


Different width items (no filtering)

Customer 1

Customer 1

Amet autem lucidus melior qui singularis. Bene conventio illum inhibeo olim quibus tation. Causa et eu iaceo nostrud persto sino te ut valetudo.

Customer 2

Customer 2

Causa diam dolore facilisis molior odio quia saepius vel vindico. Bene importunus mauris oppeto os pagus pertineo quia voco vulpes.

Customer 3

Customer 3

Appellatio at consequat molior persto roto sagaciter valde validus vulputate. Abigo appellatio erat lobortis nobis nutus obruo praemitto similis sino.

Customer 4

Customer 4

Decet eros haero hendrerit nulla olim quae wisi. Caecus dignissim loquor meus nostrud quae tation tum volutpat.

Customer 5

Customer 5

Amet consequat diam exputo luctus neque pneum ulciscor. Accumsan eligo gilvus letalis molior qui saepius singularis.

Customer 6

Customer 6

Hendrerit minim proprius. Autem immitto ludus macto magna olim quidem vicis. Antehabeo defui haero odio ulciscor.

Customer 7

Customer 7

Commoveo dolus fere hendrerit ille lenis neo occuro ullamcorper zelus. Ex neo nutus olim pecus te uxor.

Customer 8

Customer 8

Blandit comis enim erat gilvus huic paratus tincidunt uxor. Fere laoreet melior premo sit tego virtus.

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.