Card group example 4

Component
Name	Card group
Description	Card group with cards organized into Masonry-like columns
Provider	Skin
Note	Cards in card columns can also have a footer. Bootstrap 5 has no card columns of its own any more, so this example sets up the columns itself.
Reference	getbootstrap.com - masonry
Styling	For all possible color styles and corresponding examples, see colors.

Updated for Bootstrap 5. Parts of this page's Bootstrap 4 code no longer work with Bootstrap 5. Wikis moving to Bootstrap 5, for example with Chameleon 6, need to update such content too. See the Bootstrap 4 version of this page.

Result

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Code

<div style="column-count: 3; column-width: 15rem; column-gap: 1.5rem;">
  <div class="card d-inline-block w-100 mb-4">
[[File:DSC02201_363.jpg|class=card-img-top img-fluid]]
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card d-inline-block w-100 mb-4 p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <span class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </span>
    </blockquote>
  </div>
  <div class="card d-inline-block w-100 mb-4">
[[File:DSC02180_363.jpg|class=card-img-top img-fluid]]
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card d-inline-block w-100 mb-4 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <span class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </span>
    </blockquote>
  </div>
  <div class="card d-inline-block w-100 mb-4 text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card d-inline-block w-100 mb-4">
[[File:DSC02166_363.jpg|class=card-img-top img-fluid]]
  </div>
  <div class="card d-inline-block w-100 mb-4 p-3 text-end">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <span class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </span>
    </blockquote>
  </div>
  <div class="card d-inline-block w-100 mb-4">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

If you add more than three cards you will need to hide the table of contents automatically generated by MediaWiki by also adding the behaviour switch __NOTOC__ to the page.