How to create equal height columns bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Equal Height Columns in Bootstrap Easily

Use Bootstrap's built-in Flexbox utilities by applying d-flex and align-items-stretch classes to the row container. This makes all columns inside the row have equal height automatically.

📐

Syntax

To create equal height columns in Bootstrap, wrap your columns inside a row with the classes d-flex and align-items-stretch. Each column should use the standard Bootstrap column classes like col, col-md-4, etc.

d-flex: Makes the row a flex container.
align-items-stretch: Ensures all flex items (columns) stretch to the same height.
col-*: Defines the column width.

html

<div class="row d-flex align-items-stretch">
  <div class="col-md-4">Column 1 content</div>
  <div class="col-md-4">Column 2 content</div>
  <div class="col-md-4">Column 3 content</div>
</div>

💻

Example

This example shows three columns with different amounts of text. Using d-flex and align-items-stretch on the row makes all columns equal height, matching the tallest column.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Equal Height Columns Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .col-content {
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <div class="row d-flex align-items-stretch">
      <div class="col-md-4 col-content">
        <h5>Column 1</h5>
        <p>This column has a short text.</p>
      </div>
      <div class="col-md-4 col-content">
        <h5>Column 2</h5>
        <p>This column has a bit more text to show how the height adjusts to the tallest column automatically.</p>
      </div>
      <div class="col-md-4 col-content">
        <h5>Column 3</h5>
        <p>This column has the most text among all three columns. It demonstrates that all columns will stretch to match this height, keeping the layout neat and balanced.</p>
      </div>
    </div>
  </div>
</body>
</html>

Output

A webpage with three side-by-side columns of equal height, each with a light gray background and border. The tallest column sets the height for all.

⚠️

Common Pitfalls

One common mistake is not applying d-flex and align-items-stretch to the row container, which means columns keep their natural height and look uneven.

Another pitfall is adding extra margins or padding that break the equal height effect.

html

<!-- Wrong way: no flex classes on row -->
<div class="row">
  <div class="col-md-4" style="background:#eee;">Short content</div>
  <div class="col-md-4" style="background:#ccc;">Longer content that makes this column taller.</div>
  <div class="col-md-4" style="background:#aaa;">Medium content.</div>
</div>

<!-- Right way: flex classes added -->
<div class="row d-flex align-items-stretch">
  <div class="col-md-4" style="background:#eee;">Short content</div>
  <div class="col-md-4" style="background:#ccc;">Longer content that makes this column taller.</div>
  <div class="col-md-4" style="background:#aaa;">Medium content.</div>
</div>

📊

Quick Reference

Use d-flex on the row to enable Flexbox.
Add align-items-stretch to make columns equal height.
Keep columns inside the flex row with standard col-* classes.
Avoid extra vertical margins on columns that break height alignment.

✅

Key Takeaways

Apply d-flex and align-items-stretch to the Bootstrap row for equal height columns.

All columns inside the flex row will stretch to match the tallest column automatically.

Avoid adding vertical margins or padding that disrupt the equal height effect.

Use standard Bootstrap column classes inside the flex row for responsive layouts.