How to Achieve a Masonry Layout with Bootstrap 4's Card Columns?

How to Create a Masonry Layout Using Flexbox in Bootstrap 4

Bootstrap 4's flexbox grid system allows for flexible and responsive column layouts. To create a masonry column layout where items have varying heights within a row, you can utilize Bootstrap's card-columns feature.

Using Card Columns

As stated in the Bootstrap documentation:

"Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right."

To create a masonry layout, simply wrap your .card elements within a .card-columns container.

Example Code

Here's an example of a masonry layout using Bootstrap 4's card-columns feature:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

By incorporating this card-columns feature, you can easily create masonry layouts without the need for custom CSS or flexbox arrangements.

The above is the detailed content of How to Achieve a Masonry Layout with Bootstrap 4's Card Columns?. For more information, please follow other related articles on the PHP Chinese website!