Bootstrap row with columns of different height

html

responsive-design

css-tips

bootstrap-classes

byAlex Kataev·Nov 4, 2024

Get top-aligned, diverse height columns in Bootstrap via the flexbox utilities. Encase the columns within a .row using .align-items-start to align them at the top. Add on .d-flex and .flex-column to the columns to handle varying content heights effectively.

<div class="container">
  <div class="row align-items-start">
    <div class="col d-flex flex-column">
      <div class="bg-primary">Short</div>   <!-- Like a 'Napoleon of Divs'-->
    </div>
    <div class="col d-flex flex-column">
      <div class="bg-secondary">Taller content</div> <!-- Sky's the limit for this div -->
    </div>
    <div class="col d-flex flex-column">
      <div class="bg-success">Short</div> <!-- Short and sweet -->
    </div>
  </div>
</div>

This code provides a uniform top alignment across columns of diverse heights.

Fine-tuning your column alignment

Tailor your vertical alignment with the flexbox align-self utility. You can use .align-self-end, .align-self-center, or .align-self-start on individual columns to get different alignments. Mix and match to get the layout effect you desire.

The art of going beyond

Struggling with the 12-column framework? Bootstrap's grid system allows for nested columns. Introduce a new .row inside a .col to ambitiously create more than 12 columns in a single tier.

<div class="row">
  <div class="col-6">
    <div class="row">
      <!-- Nested columns -->
      <div class="col-4">Item 1</div>
      <div class="col-4">Item 2</div>
      <div class="col-4">Item 3</div> <!-- Playing Tetris with columns -->
    </div>
  </div>
  <div class="col-6">
    <!-- This column still follows the strict 12-column protocol -->
  </div>
</div>

Achieving the masonry with Masonry

For a Pinterest-like masonry effect, use the Masonry JS plugin. This helps you arrange items into a slick grid and smoothly handles different heights. Works like a charm with Bootstrap 5.

When flexbox and column wrapping collide

With responsive designs, column wrapping is both a blessing and a curse. To preserve column heights while enabling wrapping, apply flex-wrap: wrap; to your .row. Add min-height on columns for uniform aesthetics on smaller screens.

CSS tips for power users

There are times when you need to transcend Bootstrap's inbuilt tools. Here are some tips:

Appropriate display: inline-block for columns to keep them neatly aligned vertically in a single line.
Implement CSS3 columns, brilliant for creating masonry effects primarily for text-based content without relying on JavaScript.
Utilize Isotope or Masonry jQuery plugins for dynamic, responsive layouts.

Bootstrap classes for the rescue

Bootstrap caters with a myriad of utility classes to fix divergent column heights:

Use .clearfix to troubleshoot unexpected wrapping or floating issues in your rows.
Apply display: flex; and flex-direction: column; on the column classes directly, avoiding the .display-flex class for a cleaner and more semantic approach.