”;
Overview
-
Masonry is a JavaScript third-party library, which is used for creating dynamic grid layouts on web pages.
-
It is often used to arrange elements, typically images or other media.
-
The media is arranged in a responsive grid layout where each element fills the available vertical space by positioning them closely together.
-
The layout looks like a masonry wall.
Bootstrap can be integrated with masonry. Masonry can be used along with Bootstrap grid system and cards component.
As masonry is not included with Bootstrap, you need to add it by including the JavaScript plugin manually, or using a CDN, like:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
You can combine the benefits of Bootstrap”s responsive grid and Masonry”s positioning, by adding data-masonry=”{“percentPosition”: true }” to the .row wrapper.
The link given below shows the example of integration of masonry and bootstrap:
| Example | Description | Download link |
|---|---|---|
| Integration of masonry and bootstrap | This example shows how to integrate masonry and bootstrap. | Download |
”;