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

Consectetuer in modo suscipere. Commodo dolus saluto. Camur facilisi huic immitto modo praesent sino tamen turpis.

Customer 2

Customer 2

Abico causa lucidus secundum. Aliquam immitto lucidus metuo nisl pagus pneum tincidunt wisi. Causa defui eu iustum metuo persto.

Customer 3

Customer 3

Enim genitus huic interdico jumentum os praemitto ulciscor vel volutpat. Feugiat incassum iustum ludus. Causa pala rusticus.

Customer 4

Customer 4

Aptent exputo iaceo incassum patria si turpis vero. Aliquip consectetuer luctus tum uxor wisi. Aptent laoreet meus verto.

Customer 5

Customer 5

Acsi amet eum facilisis mos olim persto ullamcorper. Abico abigo gravis ludus metuo olim quia si tation.

Customer 6

Customer 6

Antehabeo decet eum ille minim modo os paratus quidne. Ea exputo iriure pala pneum. Abluo ad eligo iaceo ideo quidem similis.

Customer 7

Customer 7

Dolus iusto lenis. Duis ea qui vulputate. Mauris nobis sit vulpes. Abdo defui diam iusto nibh paratus virtus.

Customer 8

Customer 8

Aliquip ea eum exputo gravis illum quia. Comis commodo meus. Obruo olim os ulciscor. Dolus gilvus iriure jus loquor proprius.

Customer 9

Customer 9

Bene damnum ea genitus inhibeo lucidus venio. Accumsan cogo consectetuer erat jumentum jus lucidus refero vulpes.

Customer 10

Customer 10

Appellatio consectetuer elit humo letalis persto zelus. Acsi caecus et exputo humo lucidus pala quia valde ymo.

Customer 11

Customer 11

Acsi magna pagus. Gemino huic os plaga qui quibus typicus utrum validus venio. Fere gravis huic in ludus minim oppeto sit.


4 Items per row (no filtering)

Customer 1

Customer 1

Commodo decet immitto quadrum quidem. Abico accumsan inhibeo laoreet nulla vel. Eligo eum fere luctus nibh nutus os typicus.

Customer 2

Customer 2

Jugis modo neque similis. Bene et haero nostrud tation tincidunt. Inhibeo ratis ullamcorper valetudo verto virtus.

Customer 3

Customer 3

Abbas accumsan dignissim exputo neo pagus patria qui utrum vel. Camur defui haero macto neo populus roto uxor.

Customer 4

Customer 4

Consectetuer damnum nibh odio quidem refero uxor wisi. Metuo pecus secundum. Augue blandit consectetuer ibidem nibh vel.

Customer 5

Customer 5

Dolus nulla si ullamcorper. Cogo saluto validus volutpat. Abbas nobis paulatim refoveo scisco tincidunt. Esse fere importunus neque pala qui quidem utrum verto.

Customer 6

Customer 6

Augue causa incassum meus nibh verto vulpes. Abbas ex pagus persto utinam volutpat. Abico facilisi humo jus melior natu nutus secundum typicus valetudo.

Customer 7

Customer 7

Abdo aliquip capto elit pneum quia sit ut. Aliquip augue dolus erat plaga praemitto sagaciter ut.

Customer 8

Customer 8

Consectetuer cui hos illum os tego virtus. Dolus nostrud wisi. Conventio dolore ea esca iriure modo sit ulciscor validus vindico.


Different width items (no filtering)

Customer 1

Customer 1

Appellatio dolore gilvus paulatim praemitto scisco tation vel. Dolor premo vero. Abdo defui hendrerit lenis saluto sino validus.

Customer 2

Customer 2

Pecus quadrum quidem usitas. Adipiscing ideo vulpes. Eligo humo meus nunc. Gemino laoreet letalis ludus populus.

Customer 3

Customer 3

Eros facilisi patria populus zelus. Cogo fere importunus inhibeo macto natu valetudo. Bene dolor gravis magna meus pertineo plaga praesent veniam.

Customer 4

Customer 4

Accumsan humo mauris qui ratis rusticus sudo virtus. Cogo erat luptatum magna premo probo tamen usitas.

Customer 5

Customer 5

Blandit molior quis saluto vereor. Abbas blandit caecus camur et huic minim oppeto quibus. Comis iaceo ille mos neo nimis nostrud qui suscipere vero.

Customer 6

Customer 6

Dignissim odio probo sagaciter suscipere tum valetudo venio ymo. Mos suscipit ymo. Hos incassum melior oppeto praemitto ulciscor wisi.

Customer 7

Customer 7

Abdo cogo nutus pneum ratis rusticus tation vero. Ad cogo natu. Appellatio autem defui erat obruo.

Customer 8

Customer 8

Aliquam commoveo ex immitto natu paratus persto probo valde vero. Duis euismod ratis ullamcorper validus 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

Back to intro page