Bootstrap 5 masonry layouts display items of varying heights in a Pinterest-style grid. This page covers 4 masonry patterns — CSS columns, Bootstrap data-masonry, text cards and filtered gallery — each ready to use.

Quick Setup

CSS columns masonry needs only Bootstrap 5 CSS. Bootstrap data-masonry needs Masonry.js:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Only for Bootstrap data-masonry -->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Key Classes Reference

Class / PropertyWhat It Does
column-count: 3CSS columns masonry (no JS)
column-gap: 16pxGap between columns
break-inside: avoidPrevents items splitting across columns
data-masonryBootstrap's built-in masonry (needs Masonry.js)
.rowContainer for Bootstrap masonry
.col-sm-6Column width for Bootstrap masonry

1. CSS Columns Masonry Layout

The simplest masonry approach using CSS column-count. No JavaScript required.

2. Bootstrap 5 Built-in Masonry

Bootstrap 5.1+ includes a built-in masonry layout via data-masonry attribute. Requires Masonry.js library.

3. Bootstrap 5 Text Card Masonry

Masonry layout with text-only cards of varying heights. Great for blog posts and notes.

4. Bootstrap 5 Filterable Masonry Gallery

Masonry grid with category filter buttons. Click to show only items from that category.

Frequently Asked Questions

Bootstrap 5.1+ includes basic masonry support via data-masonry attribute on a row, but it requires the external Masonry.js library to work. For a pure CSS approach use CSS column-count which works without any JavaScript or extra libraries.
CSS columns is the simplest: .masonry { column-count: 3; column-gap: 16px; } with break-inside: avoid on each item. No JavaScript needed. The limitation is items flow top-to-bottom within columns, not left-to-right. For true masonry with left-to-right flow use Masonry.js.
Use media queries to change column-count: @media (max-width: 768px) { .masonry { column-count: 2; } } @media (max-width: 480px) { .masonry { column-count: 1; } }. This gives a 3-column desktop, 2-column tablet, 1-column mobile layout.
Add break-inside: avoid to each item: .masonry-item { break-inside: avoid; margin-bottom: 16px; }. This prevents cards from being split between columns. Also add page-break-inside: avoid for older browser compatibility.
CSS columns: simpler, no JS, great for static content like blog posts and galleries. Limitation: items fill top-to-bottom. Masonry.js: more accurate positioning, items fill left-to-right, better for dynamic content added after page load. Choose CSS columns for simplicity and Masonry.js for precision.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Grid System Example

View examples →

Bootstrap 5 Card Example

View examples →

Bootstrap 5 Image Gallery

View examples →