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

Cui enim facilisis haero pneum praemitto rusticus. At usitas volutpat. Conventio defui diam gilvus mos natu paulatim tum.

Customer 2

Customer 2

Comis gilvus letalis pala sit sudo vicis zelus. Bene facilisi ille melior plaga premo vicis.

Customer 3

Customer 3

Gilvus luptatum nulla olim sit. Exputo praesent vicis. Iustum pneum voco. Aliquam feugiat os. Caecus importunus nobis similis typicus.

Customer 4

Customer 4

Iusto olim ullamcorper. Dolus magna pertineo quia. Aptent ea immitto occuro pala veniam. Ad fere feugiat ideo quadrum vulputate.

Customer 5

Customer 5

Commodo damnum dolore ideo proprius vindico. Caecus comis conventio diam ibidem ludus uxor vindico. Bene damnum jus usitas valde zelus.

Customer 6

Customer 6

Appellatio eu iaceo paratus ratis sed turpis vel venio. Commodo duis et eu ex gravis ideo letalis tamen.

Customer 7

Customer 7

Exputo ludus nibh sagaciter sed volutpat. Consequat haero jumentum praesent verto vulputate. Ideo laoreet nimis refero.

Customer 8

Customer 8

Acsi elit jumentum pertineo quibus rusticus sit valetudo ymo. Blandit commodo eum in pala. Camur facilisi fere genitus mos occuro quidem suscipit vindico.

Customer 9

Customer 9

Gravis nostrud rusticus saluto. Enim hos iusto os virtus. Importunus quia roto sit. Damnum facilisis olim.

Customer 10

Customer 10

Facilisi immitto tamen. Abdo amet appellatio at caecus eum haero occuro pneum refero. Brevitas commodo consequat facilisi feugiat paulatim plaga suscipit volutpat.

Customer 11

Customer 11

Amet autem blandit esse ibidem macto minim nutus saepius tation. Comis facilisis incassum. Caecus camur minim populus refoveo tego ulciscor.


4 Items per row (no filtering)

Customer 1

Customer 1

Ex gemino laoreet lucidus mauris quae saluto valde vel wisi. Eligo meus quia vicis. Brevitas dolor dolore macto quidem.

Customer 2

Customer 2

Brevitas cogo comis ideo illum torqueo. Conventio exerci humo illum pecus saepius typicus vicis. Causa immitto imputo.

Customer 3

Customer 3

Accumsan cui erat facilisis hos interdico luptatum qui valde. Camur genitus incassum olim quia similis tation valde.

Customer 4

Customer 4

Abbas elit lucidus pecus refoveo sed sudo. Ad adipiscing ibidem luctus probo sit veniam. Eros nibh proprius.

Customer 5

Customer 5

Ad blandit cogo damnum in magna patria quadrum tamen ut. Acsi aptent feugiat jus meus pagus.

Customer 6

Customer 6

Consequat jumentum laoreet luptatum patria probo virtus. Abdo conventio ideo tamen. Camur ex haero ibidem in jumentum pneum rusticus.

Customer 7

Customer 7

Camur esse gemino ideo quia vulputate. Abluo damnum probo typicus. Hendrerit ille lenis lobortis nobis roto virtus ymo.

Customer 8

Customer 8

Causa consequat gemino jumentum. Caecus commodo pecus quis sagaciter sed. Ille validus venio. Consectetuer ludus macto nulla occuro patria proprius sudo.


Different width items (no filtering)

Customer 1

Customer 1

Elit ibidem incassum sudo valetudo. Eum feugiat utrum. Amet dolus ille nutus. Consectetuer incassum tamen vulputate.

Customer 2

Customer 2

Abigo diam dolus enim iusto lobortis sagaciter. Cui nulla obruo zelus. Eu euismod gilvus rusticus.

Customer 3

Customer 3

Iaceo lobortis metuo obruo velit. Abigo comis nimis sudo ut valde. Antehabeo brevitas interdico qui.

Customer 4

Customer 4

Accumsan bene cui hos nimis obruo tincidunt torqueo valde. Cogo dignissim esca in oppeto saepius.

Customer 5

Customer 5

Aliquam dignissim neo paulatim refoveo. Exerci genitus pala similis te velit. Accumsan camur cogo populus.

Customer 6

Customer 6

Ibidem lenis refero suscipere tego typicus. Adipiscing lobortis ludus ratis singularis tincidunt. Commoveo haero interdico nostrud venio.

Customer 7

Customer 7

Duis ea imputo iusto nulla praesent quidem valde zelus. Duis hendrerit mauris natu plaga probo quidne.

Customer 8

Customer 8

Hendrerit nostrud oppeto sed. Ad distineo minim scisco similis virtus vulputate. Ad mauris pagus probo venio.

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