Vertical Alignment in Bootstrap 3: Why `vertical-align` Doesn’t Work and What to Use Instead

By the end of this page, you will understand why vertical-align does not work on Bootstrap 3 grid columns, how floats affect layout, and which CSS techniques are better for vertical centering or bottom alignment. You will also see practical examples using table layout, absolute positioning, and modern flexbox alternatives for newer projects.

vertical-align is one of the most misunderstood CSS properties. It does not vertically align any random block element. It mainly works on:

• inline or inline-block elements
• table cells

Bootstrap 3 grid columns such as .col-xs-5 are based on floats. A floated element is taken into a different layout mode, so vertical-align has no effect on it.

In Bootstrap 3, the grid was designed primarily for horizontal column layout, not for vertical alignment inside a row. That is why trying this usually fails:

.col-xs-5 {
  vertical-align: bottom;
}

It does nothing useful because the columns are floated.

Why this matters:

• You often need elements to line up at the top, middle, or bottom.
• Different layout systems support vertical alignment differently.
• Choosing the wrong method can make responsive layouts fragile.

In older Bootstrap 3 projects, common solutions include:

• using display: table and display: table-cell
• using absolute positioning in carefully controlled layouts
• using equal-height helper structures
• avoiding hard-coded margins when content size may change

In newer CSS and Bootstrap versions, flexbox is the preferred solution because it supports vertical alignment directly and cleanly.

Think of layout modes as different types of containers:

• Float layout is like objects floating in water. They drift left or right, but they are not designed to line up vertically with precision.
• Table-cell layout is like spreadsheet cells in the same row. Cells naturally know how to align their content vertically.
• Flexbox layout is like a smart shelf that can center, stack, and align items with simple rules.

So if you ask vertical-align to work on floated Bootstrap 3 columns, it is like asking a floating boat to behave like a table cell. It is the wrong layout model for that job.

The key idea is: if you need vertical alignment, use a layout model that supports it.

1. Why vertical-align fails on Bootstrap 3 columns

<div class="row">
  <div class="col-xs-5 box-a">Big</div>
  <div class="col-xs-5 box-b">Small</div>
</div>

.box-a,
.box-b {
  vertical-align: bottom;
}

This does not work because .col-xs-5 is floated.

2. A Bootstrap 3-friendly approach using table display

<div class="row row-table">
  <div class="col-xs-5 col-table">
    <div style="height: 5em; border: 1px solid #000;">Big
  
  
    Small
  

Consider this Bootstrap 3-compatible table-layout example:

<div class="row row-table">
  <div class="col-xs-5 col-table">
    <div style="height: 5em; border: 1px solid black;">Big</div>
  </div>
  <div class="col-xs-5 col-table">
    <div style="height: 3em; border: 1px solid red;">Small</div>
  </div>
</div>

.row-table {
  display: table;
  width: 100%;
}

.col-table {
  display: table-cell;
  float: none;
  vertical-align: bottom;
}

Here is what happens:

1. The browser reads .row-table { display: table; }.

Vertical alignment is common in real interfaces, especially when elements have different heights.

Common scenarios

• Pricing cards where buttons should line up at the bottom
• Product listings where titles differ in length but actions should align
• Dashboard widgets with different content heights
• Form layouts where labels and controls should align neatly
• Media objects where an icon or image should line up with text content

Example: card footer alignment

In a product grid, one card may have a longer description than another. You often want the "Buy" buttons to align across the row. In Bootstrap 3, developers sometimes used table-cell or fixed-height wrappers to achieve this.

Example: mixed-height content blocks

If one column has a large heading and another has only a short label, bottom alignment can make the row look intentional and polished.

In real projects, developers usually avoid one-off margin-top hacks for alignment because content changes over time.

Common patterns include:

1. Using a dedicated helper class

Instead of inline styles, define reusable classes:

.row-bottom-align {
  display: table;
  width: 100%;
}

.row-bottom-align > [class^="col-"] {
  display: table-cell;
  float: none;
  vertical-align: bottom;
}

This makes the behavior consistent across the codebase.

2. Guarding against dynamic content

If text length or translated strings can grow, hard-coded spacing breaks quickly. A table-cell or flex layout adapts better.

3. Progressive enhancement

In legacy Bootstrap 3 codebases, teams often keep the existing grid for most pages but use a special class for rows that need vertical alignment.

4. Migrating to flexbox later

A common upgrade path is:

• keep Bootstrap 3 markup
• add custom flex classes where browser support allows
• migrate fully when upgrading Bootstrap versions

5. Avoiding absolute positioning unless layout is fixed

Absolute positioning can work, but it often becomes brittle when content height changes or screens shrink.

1. Expecting vertical-align to work on normal block elements

Broken example:

.col-xs-5 {
  vertical-align: middle;
}

Why it fails:

• .col-xs-5 is floated
• vertical-align does not vertically center floated block columns

How to avoid it:

• use table-cell or flexbox instead

2. Using margin-top as a permanent alignment fix

Broken approach:

.small-box {
  margin-top: 2em;
}

Why it is risky:

• it depends on current content height
• text changes, font changes, or screen changes can break the layout

How to avoid it:

• use a layout system that naturally aligns elements

3. Forgetting to remove floats when switching to table-cell

Broken example:

.col-table {
  display: table-cell;
  : bottom;
}

Quick rules

• vertical-align works on:
  • inline elements
  • inline-block elements
  • table cells
• vertical-align does not solve vertical alignment for floated Bootstrap 3 grid columns.
• Bootstrap 3 grid columns use float: left.
• For Bootstrap 3, use display: table and display: table-cell when needed.
• For modern layouts, use flexbox.

Bootstrap 3 table-cell pattern

.row-table {
  display: table;
  width: 100%;
}

.col-table {
  display: table-cell;
  float: none;
  vertical-align: middle; /* or top / bottom */
}

Modern flexbox pattern

.row-flex {
  display: flex;
  align-items: center; /* or flex-start / flex-end */
}

Alignment values

• top

Why does vertical-align not work in Bootstrap 3?

Because Bootstrap 3 grid columns are floated with float: left, and vertical-align does not vertically align floated block elements.

Can I vertically align columns in Bootstrap 3 without JavaScript?

Yes. A common CSS-only solution is to use display: table on the row and display: table-cell on the columns.

Is using margin-top a good solution for vertical alignment?

Usually no. It is fragile and can break when content height changes or the layout becomes responsive.

What is the best modern way to vertically align elements?

Use flexbox with properties like align-items: center or align-items: flex-end.

Does Bootstrap 4 or 5 solve this more easily?

Yes. Newer Bootstrap versions use flexbox utilities, making vertical alignment much easier.

Should I replace the Bootstrap 3 grid entirely?

Not always. In a legacy project, it is often enough to add a custom helper class only where vertical alignment is needed.

• CSS floats — Bootstrap 3 grid columns are based on floats, which explains the alignment limitation.
• CSS display property — Understanding block, inline-block, table, and table-cell helps explain why some alignment methods work and others do not.
• Flexbox — The modern layout system for vertical and horizontal alignment.
• Bootstrap grid system — Knowing how Bootstrap 3 columns are built helps you choose the right workaround.
• Responsive design — Alignment techniques should adapt to different screen sizes without hard-coded spacing.
• CSS positioning — Absolute positioning is another layout option, though usually less flexible here.