htmlcsstwitter-bootstrapmasonrybootstrap-5

Bootstrap 5 layout for different sizes cards - like Pinterest

I am building a web that would use Bootstrap 5, the web would have a section which displays several cards like this enter image description here

As you can see, each card may have different sizes (Depending on the description and thumbnail)

How do I make them compact, as in like the Pinterest homepage

enter image description here

What class do I need to use (In bootstrap 5), or what layout

Solution

  • 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.