Bootstrap 5 Layout for Different Sizes Cards - Like Pinterest

Bootstrap 5 layout for different sizes cards - like Pinterest

As explained in the Bootstrap 5 docs, the Masonry JS plugin is the recommended option for this type of "Pinterest" layout. The multi-column card layout (card-columns) that was used in Bootstrap 4 is no longer available in Bootstrap 5.

Using the Masonry plugin is easy. Just use the appropriate col-* class to set the number of columns across, and then the data-masonry attribute on the containing row...

<div class="container">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-*">
            ...
        </div>
    </div>
</div>

https://codeply.com/p/yrjCBwUeKR

---

Note: The CSS grid masonry (ie: grid-template-rows: masonry;) option mentioned by others currently only works in Firefox, and is not yet a recommended option.

Tangled cards in Bootstrap

The result you are thinking of can be achieved by integrating Masonry with the Bootstrap grid system and cards component.

Masonry is not included in Bootstrap so you have to include it manually in your system.

Include this script tag in your webpage

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>

After including this you have to add data-masonry='{"percentPosition": true }' like this in the to the .row wrapper,

<div class="row row-cols-2" data-masonry='{"percentPosition": true }'>

Output

Is it possible to create a pinterest-like layout with Bootstrap only?

Found a (free) template at http://bragthemes.com/demo/pinstrap/. It's supposed to have all you are asking for. Haven't had time to check it out, though.

Edit 2016-03-15: Bootstrap 4 allows this out of the box here. It's still in alpha, but we're getting there.

card-columns class is missing in bootstrap 5.0 ? does bootstrap provide any alternative in addition to using css media queries and flex column?

As explained in the Bootstrap 5 docs, card-columns were dropped in favor of Masonry.

"In v4 we used a CSS-only technique to mimic the behavior of
Masonry-like columns, but this technique came with lots of unpleasant
side effects. If you want to have this type of layout in v5, you can
just make use of Masonry plugin. Masonry is not included in
Bootstrap..."

Bootstrap 5 Masonry Demo

---

Related: Bootstrap 5 layout for different sizes cards - like Pinterest

---

Related Topics