Vertical Alignment in Bootstrap 3 Columns

You will learn why vertical-align has no effect on Bootstrap 3 grid columns, which layout modes support it, and how to use flexbox or a table-cell fallback to align columns based on their actual heights.

Bootstrap 3 columns such as .col-xs-5 are laid out with float: left. A floated element is still a block-level layout box, and vertical-align does not position floated block elements.

vertical-align is designed mainly for:

• inline and inline-block elements on the same text line
• table cells
• inline content such as images beside text

For a row of columns that should line up vertically, the parent layout method must control alignment. Modern CSS does this with Flexbox: the parent becomes a flex container and align-items controls alignment across the vertical (cross) axis.

This matters because a fixed margin-top only works for one known height. If text wraps, content is loaded dynamically, or the viewport changes, the required margin changes too. Layout rules such as flex alignment adapt automatically.

Think of the .row as a shelf holding boxes.

With Bootstrap 3 floats, each box is pushed to the left, but the shelf does not have a built-in instruction for whether short boxes should sit at the top, middle, or bottom beside tall boxes.

Flexbox gives the shelf that instruction:

• flex-start: place boxes at the top
• center: place boxes in the middle
• flex-end: place boxes at the bottom

vertical-align is not that shelf instruction for floated boxes; it is more like an instruction for letters, icons, or table cells sharing a line.

Use Flexbox on the parent .row, then choose an alignment value with align-items.

<div class="row vertical-center">
  <div class="col-xs-5">
    <div class="big-box">Big</div>
  </div>
  <div class="col-xs-5">
    <div class="small-box">Small</div>
  </div>
</div>

.vertical-center {
  display: flex;
  align-items: center;
}

.big-box {
  height: 5em;
  border: 1px solid #000;
}

.small-box {
  height: 3em;
  border: 1px solid #f00;
}

display: flex makes the direct children of .vertical-center flex items. align-items: center centers the shorter column vertically relative to the tallest item in that flex line.

Other useful values are:

.align-top { align-items: flex-start; }
.align-middle { align-items: center; }
.align-bottom { align-items: flex-end; }

If the goal is to align the text inside a fixed-height box, make that box a flex container instead:

.big-box,
.small-box {
  display: flex;
  align-items: center;
}

Consider this markup and CSS:

<div class="row vertical-center">
  <div class="col-xs-5"><div class="big-box">Big</div></div>
  <div class="col-xs-5"><div class="small-box">Small</div></div>
</div>

.vertical-center {
  display: flex;
  align-items: center;
}

.big-box { height: 80px; }
.small-box { height: 48px; }

1. The browser finds .vertical-center and applies display: flex.
2. Its direct children, the two .col-xs-5 elements, become flex items.
3. The tallest item establishes an 80px-high flex line.
4. The second item is 48px high.
5. align-items: center distributes the remaining 32px of vertical space around the shorter item: 16px above and 16px below.
6. If the content or viewport causes a height to change, the browser recalculates the centering automatically.

The direct children must be the items you want to align. Styling a nested child cannot vertically align its parent column.

Vertical alignment is useful wherever neighboring UI elements have unpredictable heights:

• Product cards: align prices, buttons, or badges despite different product titles.
• Profile rows: center an avatar next to a multi-line user description.
• Dashboard widgets: align a small status panel beside a taller chart.
• Form layouts: align a checkbox or action button beside a taller field group.
• Article previews: center a thumbnail beside an excerpt of variable length.
• API-driven interfaces: keep layout stable when server-provided text is shorter or longer than expected.

In production code, avoid inline styles and create a reusable utility or component class.

.row-flex-center {
  display: flex;
  align-items: center;
}

<div class="row row-flex-center">
  <div class="col-sm-4">...</div>
  <div class="col-sm-8">...</div>
</div>

A Bootstrap 3-specific consideration is responsive wrapping. Bootstrap columns can add up to more than 12 units or may need to stack at narrow widths. A flex row may need wrapping:

.row-flex-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

At a breakpoint where stacked columns are desired, switch back to block layout:

@media (max-width: 767px) {
  .row-flex-center {
    display: block;
  }
}

Use this only when it matches the component’s responsive behavior. In newer projects, Bootstrap 4 and later provide flex utility classes, but Bootstrap 3 does not include native flexbox grid utilities.

Applying vertical-align to floated columns

/* Does not vertically center Bootstrap 3 floated columns. */
.col-xs-5 {
  vertical-align: middle;
}

vertical-align does not control the position of floated block elements. Change the parent layout to flexbox, or use a table-cell layout where appropriate.

Using a fixed margin to simulate centering

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

This breaks when either box changes height. Use align-items: center when the relationship should remain centered.

Styling the wrong element

.small-box {
  display: flex;
  align-items: center;
}

This centers content inside .small-box; it does not move the column next to the larger column. Put display: flex on their shared parent.

Forgetting that Flexbox affects direct children

<div class="row vertical-center">
  <div class="wrapper">
    <div class="col-xs-5">...</div>
  </div>
</div>

Here, .wrapper is the flex item, not .col-xs-5. Ensure the elements that need alignment are direct children, or apply the layout rule at the correct level.

Assuming old browsers support Flexbox

Bootstrap 3 supported older browser environments. If an application must support legacy browsers without modern Flexbox support, test carefully and consider the table-cell alternative.

A table-cell alternative looks like this:

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

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

This works because vertical-align applies to table cells. However, Flexbox is generally clearer for modern layouts.

/* Center direct children vertically */
.parent {
  display: flex;
  align-items: center;
}

/* Top, center, or bottom on the cross axis */
.parent { align-items: flex-start; }
.parent { align-items: center; }
.parent { align-items: flex-end; }

/* Allow Bootstrap-like column wrapping */
.parent {
  display: flex;
  flex-wrap: wrap;
}

• Bootstrap 3 .col-* classes use floats.
• vertical-align does not align floated block elements.
• Put display: flex on the shared parent.
• align-items aligns the parent’s direct children vertically in a horizontal flex row.
• Use justify-content for horizontal distribution in the usual row direction.
• Use a breakpoint override if flex behavior should stop when columns stack.

Why does vertical-align: middle not work in Bootstrap 3?

Bootstrap 3 grid columns are floated block elements. vertical-align does not control vertical positioning for floats.

What is the best way to vertically center Bootstrap 3 columns?

For modern browsers, set display: flex and align-items: center on the shared .row or another shared parent.

Should I use margin-top to center the shorter column?

Usually no. A fixed margin depends on known heights and fails when content wraps or changes.

Does align-items: center center text inside the column?

Not by itself. It centers the direct flex items relative to each other. To center text inside a box, make that box a flex container too.

Can I use Flexbox with Bootstrap 3?

Yes, but it is custom CSS because Bootstrap 3’s grid itself is float-based. Test your target browsers and responsive wrapping behavior.

What can I use if I cannot use Flexbox?

A display: table parent with display: table-cell, float: none, and vertical-align: middle on the columns is a possible fallback.

Why might columns stop behaving like the Bootstrap grid after adding Flexbox?

Floats no longer determine the layout of flex items. Also consider flex-wrap: wrap and breakpoint-specific rules when preserving responsive behavior.

• CSS Flexbox — Provides parent-controlled alignment and distribution of items.
• CSS align-items — Selects top, center, bottom, or stretch alignment on a flex container’s cross axis.
• CSS justify-content — Distributes flex items along the main axis, usually horizontally in a row.
• CSS vertical-align — Aligns inline-level content and table cells, not ordinary floated blocks.
• Bootstrap 3 grid system — Uses floated .col-* columns and responsive width classes.
• CSS floats and clearing — Explains the layout mechanism used by Bootstrap 3.
• Responsive design breakpoints — Helps adapt alignment behavior when columns stack on small screens.