How to Vertically Center Elements in Bootstrap 4 Using Bootstrap Vertical Align Utilities

Add the align-middle class to inline, inline-block, or table-cell elements to vertically center content within their line box, or use d-flex with align-items-center for block-level containers.

Bootstrap 4 includes a complete set of bootstrap vertical align utility classes that map directly to CSS vertical-align properties, eliminating the need for custom stylesheets. These utilities are generated dynamically from the SCSS source in the twbs/bootstrap repository and apply to inline-level and table-cell contexts.

Bootstrap Vertical Align Utility Classes

The framework provides six utility classes that control vertical positioning. These classes work specifically on inline, inline-block, and table-cell elements.

• align-baseline – Aligns the element’s baseline with the parent’s baseline.
• align-top – Aligns the element to the top of the line box.
• align-middle – Centers the element vertically relative to the line box (the primary class for vertical centering).
• align-bottom – Aligns the element to the bottom of the line box.
• align-text-top – Aligns the element with the top of the parent’s font.
• align-text-bottom – Aligns the element with the bottom of the parent’s font.

For block-level elements, these utilities have no effect. You must first convert the element to an inline-block display (using d-inline-block) or use flexbox utilities instead.

Source Code Implementation in _utilities.scss

According to the twbs/bootstrap source code, the vertical align utilities are generated in scss/_utilities.scss through the utilities mixin. The SCSS block loops through specific values to generate the class names:

// scss-docs-start utils-vertical-align
@include utilities(
  $prefix: "", // no prefix for utilities
  $utilities: (
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-top text-bottom
    )
  )
);
// scss-docs-end utils-vertical-align

This compilation step outputs the six .align-* classes, each setting the vertical-align property to the corresponding value. The class: align parameter ensures the output uses the align- prefix rather than the property name.

Practical Examples for Vertical Centering

Center an Icon with Text Using Inline-Block

When centering an icon alongside text, apply align-middle to both elements to align their centers within the same line box:

<span class="d-inline-block align-middle">
  <svg class="bi" width="24" height="24" role="img" aria-label="Bootstrap">
    <use xlink:href="#bootstrap"/>
  </svg>
</span>
<span class="align-middle">Bootstrap</span>

The d-inline-block class is required because SVG elements or their containers may default to block-level behavior, which ignores vertical-align properties.

Vertically Center Content in Table Cells

Table cells support vertical-align natively. Add align-middle directly to the <td> element:

<table class="table">
  <tr>
    <td class="align-middle">
      <button class="btn btn-primary">Action</button>
    </td>
    <td>Other content</td>
  </tr>
</table>

This centers the button vertically within the cell regardless of the row height.

Top-Align Images with Surrounding Text

To align an image’s top edge with the top of the text line, use align-top:

<img src="logo.png" class="align-top me-2" alt="Logo">
<span>Some paragraph text that starts lower than the image.</span>

This creates a "top-aligned" effect where the image sits higher than the text baseline.

Block-Level Vertical Centering with Flexbox

The bootstrap vertical align utilities do not work on block-level containers. For full-height divs, use flexbox utilities instead:

<div class="d-flex align-items-center" style="height: 150px;">
  <div class="mx-auto">
    <p class="mb-0">Centered vertically</p>
  </div>
</div>

Here, d-flex establishes a flex container and align-items-center handles the vertical distribution, which is the correct Bootstrap 4 pattern for block-level centering.

Bottom-Align Badges and Subtext

Position badges or "new" tags at the bottom of a heading using align-bottom:

<h1>
  Heading
  <span class="badge badge-secondary align-bottom">New</span>
</h1>

This pushes the badge to the bottom edge of the line box, sitting just below the heading’s text baseline.

Key Source Files and Implementation Details

File Path	Purpose
scss/_utilities.scss	Generates the .align-* utility classes via the SCSS utilities mixin.
scss/_reboot.scss	Sets base vertical-align values for browser normalization.
site/content/docs/4.6/utilities/vertical-alignment.md	Official documentation demonstrating usage examples.

These files demonstrate how Bootstrap 4 abstracts CSS vertical-align into reusable utility classes while maintaining the framework's responsive design principles.

Summary

• Bootstrap vertical align utilities use the align-* class prefix to control vertical-align properties.
• align-middle is the primary class for centering inline and table-cell elements vertically.
• These utilities only affect inline, inline-block, and table-cell elements; block-level containers require d-flex and align-items-center.
• The classes are generated in scss/_utilities.scss through the utilities mixin, ensuring consistent naming across the framework.
• For table layouts, apply the class directly to <td> elements for immediate vertical centering.

Frequently Asked Questions

Why doesn't align-middle work on my div element?

The bootstrap vertical align utilities rely on the CSS vertical-align property, which only applies to inline-level and table-cell elements. Block-level elements like <div> ignore this property entirely. Convert the element to d-inline-block or use d-flex with align-items-center for block-level vertical centering.

Can I use bootstrap vertical align utilities with flexbox containers?

No. The align-* classes set vertical-align, which is ignored by flex containers. In flexbox contexts, use align-items-center (for the container) or align-self-center (for individual items) instead. These are separate utilities designed specifically for flex layouts.

How do I vertically center a div inside another div in Bootstrap 4?

For block-level centering, wrap the child div in a parent with d-flex align-items-center:

<div class="d-flex align-items-center" style="height: 200px;">
  <div>Centered content</div>
</div>

If the parent is a table cell, you can use align-middle directly on the cell without flexbox.

Where are the vertical align utility classes defined in the Bootstrap 4 source?

The classes are defined in scss/_utilities.scss within the twbs/bootstrap repository. The file uses the utilities mixin to generate the .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, and .align-text-bottom classes by mapping the vertical-align property to specific keyword values.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}