Bootstrap 5Layout

Bootstrap 5 Masonry Layout

Bootstrap 5 Masonry Layout arranges grid items into a Pinterest-style, variable-height column grid where items fill vertical gaps automatically rather than sitting in rigid rows. It requires Bootstrap 5's built-in Masonry support (powered by Masonry.js via the data-bs-masonry attribute) and is ideal for displaying content that varies in height, such as image galleries, blog cards, or mixed-media feeds.

Primary Class

.masonry-layout

Common Use Cases

→Photography portfolio galleries where landscape and portrait images need to coexist without awkward whitespace between rows
→Blog or news archive pages that mix short snippet cards with long summary cards across three or four columns
→E-commerce product listings where product descriptions vary significantly in length and uniform row heights waste screen space
→Social-proof sections that display customer testimonials of different lengths without forcing all cards to match the tallest one in each row

Variants & Classes

Variant	Description	Classes
Masonry Layout Default	Standard masonry layout with Bootstrap's default styling.	`masonry-layout`
Masonry Layout Responsive	Responsive variant that adapts to different screen sizes.	`masonry-layout masonry-layout-responsive`

Code Example

<!-- Requires Masonry.js loaded before Bootstrap bundle or use Bootstrap's built-in data attribute -->
<div class="row" data-bs-masonry='{"percentPosition": true}'>

  <!-- Tall card: featured article -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card h-100 shadow-sm">
      <img src="/img/web-design-trends.jpg" class="card-img-top" alt="Web design trends 2025">
      <div class="card-body">
        <span class="badge bg-primary mb-2">Design</span>
        <h5 class="card-title">Web Design Trends Shaping 2025</h5>
        <p class="card-text">From glassmorphism to AI-generated layouts, we break down the visual directions dominating the industry this year and what they mean for conversion rates.</p>
      </div>
      <div class="card-footer text-muted small">March 12, 2025 &middot; 6 min read</div>
    </div>
  </div>

  <!-- Short card: quick tip -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <span class="badge bg-success mb-2">Quick Tip</span>
        <h5 class="card-title">Use CSS Logical Properties</h5>
        <p class="card-text">Replace margin-left with margin-inline-start to build layouts that work correctly in both LTR and RTL languages without extra overrides.</p>
      </div>
    </div>
  </div>

  <!-- Medium card: tutorial with image -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card shadow-sm">
      <img src="/img/bootstrap-grid.jpg" class="card-img-top" alt="Bootstrap grid system overview">
      <div class="card-body">
        <span class="badge bg-warning text-dark mb-2">Tutorial</span>
        <h5 class="card-title">Bootstrap 5 Grid Deep Dive</h5>
        <p class="card-text">Understand the 12-column system, breakpoints, and how to nest grids without breaking your layout at tablet widths.</p>
      </div>
      <div class="card-footer text-muted small">February 28, 2025 &middot; 9 min read</div>
    </div>
  </div>

  <!-- Short card: stat highlight -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card bg-dark text-white shadow-sm">
      <div class="card-body text-center py-4">
        <h2 class="display-4 fw-bold">94%</h2>
        <p class="card-text">of users judge a website's credibility based on its visual design within the first 50 milliseconds.</p>
      </div>
    </div>
  </div>

  <!-- Medium card: no image -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <span class="badge bg-info text-dark mb-2">Case Study</span>
        <h5 class="card-title">How Rebranding Increased Signups by 38%</h5>
        <p class="card-text">A SaaS startup redesigned its landing page using a cleaner hierarchy and stronger CTA contrast. Here is what changed and why it worked.</p>
        <a href="#" class="btn btn-outline-primary btn-sm mt-2">Read case study</a>
      </div>
    </div>
  </div>

  <!-- Tall card: long-form intro -->
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card shadow-sm">
      <img src="/img/accessibility.jpg" class="card-img-top" alt="Accessibility in web design">
      <div class="card-body">
        <span class="badge bg-danger mb-2">Accessibility</span>
        <h5 class="card-title">Building for Everyone: A Practical Accessibility Checklist</h5>
        <p class="card-text">Colour contrast ratios, keyboard navigation, ARIA labels, and focus indicators: this checklist covers the WCAG 2.2 criteria most teams miss on their first audit.</p>
        <ul class="mt-3 ps-3 small">
          <li>Minimum 4.5:1 contrast for body text</li>
          <li>All interactive elements reachable via Tab key</li>
          <li>Images with meaningful alt attributes</li>
        </ul>
      </div>
      <div class="card-footer text-muted small">April 1, 2025 &middot; 11 min read</div>
    </div>
  </div>

</div>

Live Examples

Basic Masonry Layout

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated masonry layout with custom colours
✓Masonry Layout with interactive states
✓Responsive masonry layout for all screen sizes

Best Practices

Always load Masonry.js before the Bootstrap bundle

Bootstrap 5's data-bs-masonry attribute triggers Masonry.js automatically, but only if the library is already present in the page. Add the Masonry CDN script tag above your Bootstrap bundle script tag, otherwise the grid will render as a standard row with large gaps under shorter cards.

Set percentPosition: true to prevent subpixel drift

Pass {"percentPosition": true} inside the data-bs-masonry attribute so Masonry calculates column positions as percentages rather than pixels, which prevents layout drift on fluid, percentage-based Bootstrap grids that resize as the viewport changes.

Do not use h-100 on direct card wrappers

Applying h-100 to the card element forces all cards to stretch to the tallest item in the column, which defeats the entire purpose of masonry. Reserve h-100 for inner elements like card-body if you want the body to fill the card's natural height.

Trigger a Masonry relayout after dynamic content loads

If you load additional cards via AJAX or lazy-load images, call masonry.layout() on the Masonry instance after the DOM updates, otherwise newly added cards will stack incorrectly on top of existing ones.

FAQ

Why does my Bootstrap 5 masonry grid show large gaps under short cards?

This happens when Masonry.js is not initialised. Bootstrap 5 relies on Masonry.js being present on the page to process the data-bs-masonry attribute. If the script is missing or loaded after Bootstrap initialises, the grid renders as a normal flexbox row where every row height matches the tallest card. Confirm that the Masonry CDN script appears before your Bootstrap bundle in the HTML, then check the browser console for any script loading errors.

Can I customise the column count and gutter size in a Bootstrap 5 masonry layout?

Yes. Column count is controlled by the Bootstrap column classes you apply to each item wrapper, such as col-sm-6 for two columns or col-lg-4 for three. Gutters are controlled by gap utilities on the row element: add g-3 or g-4 to set both horizontal and vertical spacing. You can also use gx-4 and gy-2 separately if you want different horizontal and vertical gaps. There is no Masonry-specific gutter option needed because Bootstrap's grid handles spacing before Masonry repositions items.

How does Canvas Builder generate masonry layouts?

Canvas Builder reads your content prompt and automatically structures cards as column items inside a data-bs-masonry row, selecting appropriate Bootstrap column breakpoint classes based on the number of items you describe. It injects the Masonry CDN script reference in the correct position relative to the Bootstrap bundle, applies your brand colours to card badges and borders, and outputs fully responsive HTML that works across mobile, tablet, and desktop without any manual adjustments.