How to Make Bootstrap Columns the Same Height

By the end of this page, you will understand why Bootstrap columns do not automatically match heights, and how to make them equal height using reliable CSS techniques such as Flexbox and older fallback approaches. You will also see when each method is appropriate in real projects.

Bootstrap's grid system is mainly about width, not equal height. A .row groups columns horizontally, and each .col-* gets a percentage width. However, the height of each column is still based on its own content.

That means:

• a column with more text or an image becomes taller
• a column with less content stays shorter
• Bootstrap 3 does not automatically make sibling columns equal height

To make columns the same height, you need a layout method that tells the browser to treat the columns as items that should stretch to match each other.

Why this matters

Equal-height columns are common in:

• card layouts
• pricing tables
• dashboard panels
• feature comparison sections
• product grids

Without equal heights, layouts can look uneven and harder to scan.

The most common solution: Flexbox

The modern CSS solution is Flexbox. When you make the row a flex container, its children can stretch to the same height automatically.

In Bootstrap 3, Flexbox is not built into the grid by default, but you can add it with custom CSS.

Important note about Bootstrap versions

• Bootstrap 3: usually needs custom CSS for equal-height columns
• Bootstrap 4/5: use Flexbox-based grid, so equal-height behavior is easier to achieve

For the code in the question, which uses Bootstrap 3.3.7, the best practical answer is to add custom CSS.

Imagine three books standing on a shelf.

• Each book has the same width category because Bootstrap decides how much horizontal space each one gets.
• But each book has its own height depending on how much content is inside.

By default, Bootstrap only organizes the books side by side. It does not force the shorter books to grow taller.

Flexbox acts like a shelf that says: all books in this row should stretch to the same height as the tallest one.

So the tallest column becomes the reference, and the others stretch to match it.

The modern approach is to make the .row a flex container.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .row-eq-height {
    display: flex;
    flex-wrap: wrap;
  }
</style>

<div class="container-fluid">
  <div class="row row-eq-height">
    <div class="col-xs-4" style="background-color: red;">
      some content
    </div>
    <div class="col-xs-4" style="background-color: yellow;">
      catz
      <img width="100" height="100" src="https://lorempixel.com/100/100/cats/" alt="Cat image">
    </div>
    <div class="col-xs-4" style="background-color: blue;">
      some more content
    </div>
  </div>
</div>

How it works

• display: flex; makes the row use Flexbox
• the columns become flex items
• by default, flex items in a row stretch to match the tallest item
• flex-wrap: wrap; helps preserve wrapping behavior when needed

A cleaner version with inner content boxes

Often, developers keep the Bootstrap column as the grid container and put styling on an inner box:

<style>
  .row-eq-height {
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    height: 100%;
    padding: 15px;
  }

  .red { background: red; }
  .yellow { background: yellow; }
  .blue { background: blue; }
</style>

<div class="container-fluid">
  <div class="row row-eq-height">
    <div class="col-xs-4">
      <div class="box red">some content</div>
    </div>
    <div class="col-xs-4">
      <div class="box yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/" alt="Cat image">
      </div>
    </div>
    <div class="col-xs-4">
      <div class="box blue">some more content</div>
    </div>
  </div>
</div>

This is often easier to maintain because Bootstrap columns keep their layout role, while .box handles appearance.

Consider this example:

<style>
  .row-eq-height {
    display: flex;
  }
</style>

<div class="row row-eq-height">
  <div class="col-xs-4" style="background: red;">Short</div>
  <div class="col-xs-4" style="background: yellow;">
    Tall content<br>
    More content<br>
    Even more content
  </div>
  <div class="col-xs-4" style="background: blue;">Medium</div>
</div>

What happens step by step

1. The browser reads the .row.
2. Because .row-eq-height sets display: flex, the row becomes a flex container.
3. Each .col-xs-4 becomes a flex item.
4. The browser measures the content inside each column.
5. The yellow column is tallest because it has more content.
6. Flexbox stretches the red and blue columns vertically to match the tallest item.
7. All three columns end up with the same visible height.

Without Flexbox

If display: flex is removed:

• the red column stays short
• the yellow column becomes tall
• the blue column stays somewhere in between

That is the default behavior you saw in the original layout.

Equal-height columns are useful in many common layouts:

Product cards

E-commerce pages often show products in rows. If one product name is longer than others, equal heights keep the cards aligned.

Pricing tables

Plans such as Basic, Pro, and Enterprise look cleaner when each pricing panel has the same height.

Dashboard widgets

Statistics cards and admin panels often sit in a row. Matching heights makes the UI feel organized.

Feature sections

Marketing or documentation pages may show three features side by side. Equal heights help buttons and footers line up.

Blog or article grids

Preview cards with different text lengths still look balanced when their containers are equal height.

In real projects, developers usually combine equal-height columns with other layout patterns.

Common patterns

1. Flex row with inner card

A common pattern is:

• Bootstrap column controls width
• inner .card or .panel controls visuals
• Flexbox equalizes the outer column heights

<div class="row row-eq-height">
  <div class="col-sm-4">
    <div class="card">...</div>
  </div>
</div>

2. Stretching card bodies

Sometimes developers also use Flexbox inside each card so buttons stay at the bottom.

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

This is useful when cards need equal overall height and aligned internal sections.

3. Responsive behavior

Real codebases often apply equal-height layouts only on certain screen sizes. On small screens, stacked columns usually do not need equal heights.

@media (min-width: 768px) {
  .row-eq-height {
    display: flex;
    flex-wrap: wrap;
  }
}

4. Avoiding JavaScript for layout

Older projects sometimes used JavaScript to measure heights and force them to match. Modern teams usually prefer CSS because it is:

• simpler
• faster
• easier to maintain
• more responsive

5. Guarding against content differences

Developers expect content lengths to vary. Equal-height techniques help maintain a stable layout even when:

• API data changes
• translated text becomes longer
• images load later
• editors add extra content

1. Assuming Bootstrap 3 does this automatically

Bootstrap 3's grid handles widths, not equal heights.

Mistake

<div class="row">
  <div class="col-xs-4">Short</div>
  <div class="col-xs-4">Tall content with image</div>
  <div class="col-xs-4">Short</div>
</div>

Fix

Add custom CSS such as Flexbox.

.row-eq-height {
  display: flex;
}

2. Setting a fixed height

Beginners sometimes do this:

.panel {
  height: 200px;
}

This can break when content grows larger than expected.

Better approach

Use equal-height layout instead of hard-coded heights.

3. Applying height: 100% without a parent height

This often does nothing unless the parent has a defined height.

Broken example

.panel {
  height: 100%;
}

If the parent's height is not defined, the browser has nothing to measure against.

4. Styling Bootstrap structural classes directly in a risky way

For example, heavily changing .row can affect many parts of the page.

Better approach

Use a custom helper class.

<div class="row row-eq-height">

5. Forgetting responsive wrapping

When using Flexbox on rows, wrapping matters.

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

Without wrapping, layouts can behave unexpectedly on smaller screens.

6. Using .panel only for background color

In Bootstrap 3, .panel has its own styles and intended structure. Using it as a generic color block can cause confusing results.

Better approach

Use a custom class like .box for visual styling.

Example of the older display: table approach

<style>
  .row-table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .row-table > [class*='col-'] {
    display: table-cell;
    float: none;
  }
</style>

This can work, but Flexbox is usually the better choice for modern code.

Bootstrap 3 vs Bootstrap 4/5

Quick reference

Bootstrap 3 equal-height columns

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

<div class="row row-eq-height">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

Key rules

• Bootstrap 3 columns do not automatically get equal height
• Flexbox is the preferred CSS-only solution
• Use a custom class like .row-eq-height instead of changing every .row
• Add flex-wrap: wrap for safer responsive behavior
• Prefer inner content containers for styling

Common pattern

<div class="row row-eq-height">
  <div class="col-sm-4">
    <div class="box">Card content</div>
  </div>
</div>

Avoid

• fixed heights for dynamic content
• JavaScript unless supporting very old layouts
• relying on height: 100% without a defined parent height

Best default answer

For Bootstrap 3, add Flexbox to the row using custom CSS.

Why are my Bootstrap columns different heights?

Because column height is based on the content inside each column. Bootstrap 3 only controls the grid width, not equal heights.

What is the easiest way to make Bootstrap columns equal height?

Use Flexbox by adding display: flex to the row and applying it through a custom class.

Does Bootstrap 3 support equal-height columns by default?

No. Bootstrap 3 uses a float-based grid, so you need custom CSS.

Can I use height: 100% to fix this?

Usually not by itself. height: 100% only works when the parent has a defined height.

Is JavaScript needed for equal-height columns?

Not in most modern cases. CSS Flexbox is usually enough.

What about Bootstrap 4 or 5?

They use a Flexbox-based grid, so equal-height layouts are easier to build.

Should I give all columns a fixed height?

Usually no. Fixed heights can cause overflow or broken layouts when content changes.

Flexbox

The main CSS layout system used to make columns stretch to equal height.

Bootstrap grid system

Helps explain how Bootstrap manages column widths and responsive layout.

CSS display property

Important because equal-height techniques often use display: flex or older table-based layouts.

Responsive design

Useful because equal-height columns may behave differently across screen sizes.

Box model

Helps you understand how padding, borders, and content affect visible element size.

CSS alignment

Related because Flexbox alignment controls stretching and positioning of elements in a row.