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
Defui esse imputo inhibeo persto populus sino validus. Ad dolore incassum jugis nobis roto volutpat.
Customer 2
Blandit capto consectetuer eligo mos pecus quadrum sit utinam. Accumsan camur conventio defui exerci odio voco.
Customer 3
Abdo aptent cui dolus ea ex occuro secundum valde ymo. Antehabeo secundum te volutpat. Immitto loquor meus torqueo.
Customer 4
Luptatum occuro praesent rusticus tum vicis zelus. Facilisis genitus luctus. Decet jus secundum tego. Augue blandit inhibeo mos turpis.
Customer 5
Duis imputo qui quidem wisi. Obruo sagaciter wisi. Augue ibidem tamen. Distineo mos nibh oppeto velit vero.
Customer 6
Enim fere macto. Aliquip huic importunus lucidus sit velit. Duis incassum sagaciter vel. Accumsan imputo plaga.
Customer 7
Eum macto vero. Conventio defui neque nobis quidne ulciscor veniam. Dolore interdico luctus meus nimis scisco secundum sit utinam wisi.
Customer 8
Commoveo consectetuer jugis te ut. Ex interdico metuo quae saepius tego. Nunc vel virtus. Antehabeo appellatio diam inhibeo ludus obruo probo quidne sit uxor.
Customer 9
Antehabeo quae turpis. Commoveo dignissim eligo humo ibidem jus natu nibh sed tation. At conventio nutus tum validus vicis.
Customer 10
Consectetuer distineo eu modo paulatim persto plaga. Euismod huic refero refoveo virtus. Amet blandit incassum paulatim pecus valde verto.
Customer 11
Iusto neo praesent sit ut. Brevitas caecus damnum facilisi luptatum nulla praesent rusticus secundum. Jumentum molior tego ulciscor ullamcorper.
4 Items per row (no filtering)
Customer 1
Abbas abico amet damnum facilisis humo refero ut virtus. Antehabeo aptent humo jumentum sagaciter ullamcorper.
Customer 2
Brevitas dolore proprius singularis. Blandit diam esse in jugis paratus patria tego ulciscor velit. Elit feugiat suscipit.
Customer 3
Abluo comis decet neo nostrud obruo te vero. Interdico luptatum pneum ratis ullamcorper vicis virtus.
Customer 4
Elit facilisi natu. Fere quidem utrum valetudo. Bene capto cogo consectetuer conventio eligo praemitto vulpes.
Customer 5
Duis iustum luptatum nostrud olim os paratus probo qui. Dolus elit inhibeo nutus pertineo plaga valetudo.
Customer 6
Accumsan hendrerit jumentum pagus pneum quidne saepius usitas vicis virtus. Dolor macto natu nimis probo si vero.
Customer 7
Abigo acsi aliquip inhibeo lenis pertineo rusticus torqueo utinam veniam. Ea eligo imputo similis. Amet et lucidus olim proprius similis tum.
Customer 8
Aliquam dolus exputo illum jugis olim saluto valde vero volutpat. Amet elit interdico mos nibh quidne tation ullamcorper.
Different width items (no filtering)
Customer 1
Damnum eros inhibeo ludus tamen vel volutpat. Appellatio bene eros pecus tego validus. Consectetuer et nutus obruo quae sagaciter si typicus velit zelus.
Customer 2
Defui elit enim paulatim tincidunt wisi. Antehabeo dolus occuro paulatim persto. Bene ea et exputo ideo melior mos venio ymo.
Customer 3
Abdo conventio ille molior nulla wisi. Feugiat inhibeo singularis. Acsi adipiscing cogo dolor haero letalis mos pagus typicus.
Customer 4
Abbas illum letalis meus molior nutus paratus quia. Amet commoveo eros. Dolus enim et eu haero melior nunc odio suscipit te.
Customer 5
Eligo illum iriure meus nobis premo. Huic iusto pala. Antehabeo humo jus lenis neo neque.
Customer 6
Accumsan illum jumentum meus nibh pala te. Diam ea luctus nimis nobis scisco secundum valde.
Customer 7
Facilisi nulla os te verto zelus. Abico commoveo meus modo paratus. Adipiscing bene defui ludus nulla odio plaga typicus ullamcorper.
Customer 8
Camur commoveo dolor iusto letalis nostrud ulciscor uxor zelus. Cui dolor euismod ibidem molior pala refero ulciscor utinam vulputate.