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=>
    
    
      some more content
    
  

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 , the row becomes a flex container.

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

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.

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

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.