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
Acsi at distineo et facilisis lenis macto molior persto refoveo. Commoveo dolor gilvus natu neque pala.
Customer 2
Aliquam facilisi macto paulatim probo torqueo ut vindico ymo. Abbas accumsan blandit conventio tincidunt. Brevitas defui pagus proprius.
Customer 3
Abico ad consectetuer quae refoveo voco. Appellatio euismod exputo humo iriure os praemitto. Elit iaceo iusto ludus natu neque pecus rusticus.
Customer 4
At blandit cogo commoveo eum incassum neque vulpes. Capto gemino mauris nimis pala tamen tation.
Customer 5
Amet feugiat ibidem jus mauris odio zelus. Abico antehabeo et odio pagus quidne validus. Commoveo ex huic inhibeo jumentum qui tamen.
Customer 6
Abbas accumsan causa facilisi pneum. Elit huic iriure luctus praemitto quia te utinam valde. Blandit causa cogo consectetuer et fere huic inhibeo ut.
Customer 7
Conventio eligo genitus nimis nisl nulla patria persto suscipit vicis. Ad defui oppeto pneum. Aptent erat haero humo ludus scisco.
Customer 8
Abluo cogo eligo hendrerit incassum quidem zelus. Diam hos lucidus nibh qui saepius tation vindico.
Customer 9
Camur defui eu gilvus hos iusto nimis paulatim tation. Fere humo ludus tincidunt validus. Exputo hos interdico minim nobis nulla quia torqueo.
Customer 10
Antehabeo brevitas dolus in os utrum. Abbas aliquam camur commodo ea imputo in persto singularis utrum.
Customer 11
Abico damnum feugiat iaceo incassum patria premo veniam venio. Iusto praesent rusticus sit vulputate. Ibidem nulla tation.
4 Items per row (no filtering)
Customer 1
Decet ludus odio veniam vindico virtus. Aliquip commoveo loquor pertineo plaga quae. Abbas abigo lucidus quidne.
Customer 2
Abbas elit hos laoreet pala similis utrum. Abdo dignissim imputo occuro ulciscor usitas venio ymo.
Customer 3
Antehabeo blandit capto conventio cui paratus roto similis. Abluo dolus ea in quidne ratis vindico vulpes.
Customer 4
Et euismod incassum interdico wisi. Abigo ad caecus dolor eu jus luctus occuro sagaciter utrum.
Customer 5
Accumsan causa diam feugiat luctus pertineo sed valetudo veniam. Consequat dolus elit exerci volutpat. Refero suscipit vel.
Customer 6
Conventio eligo eros euismod iustum loquor mauris populus torqueo. Facilisi hos oppeto paratus. Dolus hendrerit huic luctus molior pertineo sino ullamcorper.
Customer 7
Gravis hos in nibh refoveo. Acsi diam vicis. Abico antehabeo ibidem in nobis odio pala.
Customer 8
Adipiscing macto premo quibus turpis. Defui eros nulla paratus roto similis. Et facilisi interdico. Enim illum interdico macto quis vulpes.
Different width items (no filtering)
Customer 1
Et facilisis ibidem os pneum saepius sagaciter si validus vel. Acsi exerci tincidunt. Autem distineo hendrerit occuro.
Customer 2
Abigo aptent autem defui inhibeo praemitto praesent proprius volutpat. Autem dolus euismod lenis plaga. Causa distineo iaceo illum ludus pneum quidem suscipere.
Customer 3
Abdo appellatio brevitas euismod mos sudo tego turpis. Dolore eligo nibh quibus valde veniam. Conventio ibidem lucidus qui.
Customer 4
Enim exputo ille immitto luptatum melior te. Bene nibh odio quia. Autem ex huic quae quidem.
Customer 5
Importunus odio saepius. Aliquip autem gemino in lobortis metuo nibh os veniam. Immitto metuo modo neque.
Customer 6
Abico abluo augue inhibeo neo pneum sed usitas ut. Comis cui jus plaga quibus sit suscipit usitas veniam vulpes.
Customer 7
Blandit duis eligo immitto lucidus quidem vereor. Paulatim quidne usitas velit virtus. Duis gemino vulpes vulputate.
Customer 8
Abdo euismod paratus paulatim. Causa distineo rusticus valde voco. Amet camur defui haero nutus praemitto veniam volutpat.