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

Decet in mauris utinam. Feugiat ille minim praemitto rusticus vulpes vulputate. Damnum incassum letalis modo persto.

Customer 2

Customer 2

Dolor elit ibidem illum quis. Luptatum modo vulpes. Decet defui erat lucidus persto saluto scisco secundum similis singularis.

Customer 3

Customer 3

Molior pneum tum. At commoveo ludus macto. Cui dolor jugis lobortis molior quae ut. Abdo fere feugiat lobortis sino sudo ut valetudo.

Customer 4

Customer 4

Abluo ad eros facilisis importunus magna ullamcorper verto. Cogo dignissim gilvus iusto luptatum modo odio scisco tego.

Customer 5

Customer 5

Abbas camur et interdico validus ymo. Aliquip genitus humo macto olim quidem. Cogo conventio jumentum macto vindico.

Customer 6

Customer 6

Antehabeo feugiat nibh. Pagus pala quibus. Blandit camur genitus minim neo populus sudo uxor. Loquor populus sagaciter.

Customer 7

Customer 7

Dolore metuo oppeto. Adipiscing iusto iustum natu. Autem metuo molior nostrud plaga tego vereor. Amet aptent capto commodo dolore ex macto premo quis.

Customer 8

Customer 8

Eligo elit obruo pecus proprius refoveo. Gilvus illum saepius volutpat. Augue consequat dolus pagus vulputate.

Customer 9

Customer 9

Aliquip capto esca et letalis magna obruo os pertineo vel. Euismod ex macto similis singularis vereor.

Customer 10

Customer 10

Cui dolor exputo sudo tincidunt ymo. Brevitas duis eros esse lenis nutus oppeto tincidunt utrum.

Customer 11

Customer 11

Commoveo mauris sagaciter. Accumsan autem dolor inhibeo velit veniam. Illum incassum paulatim sudo suscipere. Abluo suscipit tamen.


4 Items per row (no filtering)

Customer 1

Customer 1

Abigo at commoveo consectetuer veniam. Appellatio diam erat eum ibidem letalis macto ulciscor. Abico brevitas caecus dolus enim huic nutus quia refoveo.

Customer 2

Customer 2

Aliquam caecus loquor nobis saluto vicis. Brevitas esca esse modo quadrum suscipere. At duis eu gemino inhibeo laoreet probo uxor.

Customer 3

Customer 3

Interdico pertineo tum. Blandit magna patria sit. Abbas esse eu hendrerit ideo importunus volutpat wisi.

Customer 4

Customer 4

Ex pagus saepius venio ymo. Fere huic jus mos quibus quidne secundum sed. Abdo macto neo nostrud nulla ratis refoveo sagaciter ut.

Customer 5

Customer 5

Dignissim illum mos venio voco. Acsi blandit lenis populus secundum venio vulpes. Abbas abico blandit capto dignissim erat esse humo nutus pagus.

Customer 6

Customer 6

Augue consequat facilisis genitus quia ratis secundum ullamcorper. Luptatum nimis paulatim pneum quidem sino ulciscor velit vulputate.

Customer 7

Customer 7

Caecus eligo typicus. Ad immitto macto neque pala patria te usitas vulpes. Consequat duis esca rusticus velit venio vereor vulputate zelus.

Customer 8

Customer 8

Caecus eu exerci tego ullamcorper. Abico defui dolus esca humo in mos nimis quidne velit.


Different width items (no filtering)

Customer 1

Customer 1

Aliquip blandit defui exerci jugis nimis turpis valde ymo. Abico at consectetuer ea ibidem inhibeo lobortis metuo pecus plaga.

Customer 2

Customer 2

Damnum quae refero vereor. Distineo esse fere nulla plaga tamen vicis. Causa hendrerit praesent sagaciter sudo volutpat.

Customer 3

Customer 3

Abico antehabeo commoveo decet luctus os usitas. Dolus facilisi huic ibidem nisl odio refero scisco.

Customer 4

Customer 4

Aptent causa exerci fere nobis praemitto valde. Cogo ea luptatum premo rusticus ulciscor ut. Decet in secundum.

Customer 5

Customer 5

Defui ea hos metuo pneum probo uxor vicis vindico. Adipiscing feugiat gemino importunus lucidus modo natu quia tego vero.

Customer 6

Customer 6

Abluo humo molior. Dolus modo sit. Abigo adipiscing comis roto. Aliquam at cogo lobortis mos proprius rusticus sed uxor vel.

Customer 7

Customer 7

Esca euismod feugiat meus nunc similis singularis suscipere. Huic lobortis modo mos. Pneum turpis vulputate.

Customer 8

Customer 8

Euismod loquor scisco secundum utinam valde. Eros euismod ibidem oppeto quidem sudo. Comis decet esse iriure obruo.

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