BootstrapHow-ToBeginner · 4 min read

How to Use align-items in Bootstrap for Vertical Alignment

In Bootstrap, use the align-items utility classes on a flex container to control vertical alignment of its child elements. Classes like align-items-start, align-items-center, and align-items-end align items at the top, center, or bottom respectively.

📐

Syntax

Bootstrap uses align-items-* classes on flex containers to set vertical alignment of flex items. The container must have d-flex to enable flexbox.

d-flex: Makes the container a flexbox.
align-items-start: Aligns items to the top.
align-items-center: Aligns items vertically centered.
align-items-end: Aligns items to the bottom.
align-items-baseline: Aligns items along their text baseline.
align-items-stretch: Stretches items to fill container height (default).

html

<div class="d-flex align-items-center" style="height: 100px; border: 1px solid #ccc;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Output

A horizontal row of three items vertically centered inside a 100px tall bordered box.

💻

Example

This example shows three flex containers with different align-items classes to demonstrate vertical alignment of items inside a fixed height box.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap align-items Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      height: 100px;
      border: 2px solid #007bff;
      margin-bottom: 1rem;
      background-color: #e9f5ff;
    }
    .item {
      background-color: #0d6efd;
      color: white;
      padding: 0.5rem 1rem;
      margin-right: 0.5rem;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
  <div class="container mt-4">
    <h2>align-items-start</h2>
    <div class="d-flex align-items-start box">
      <div class="item">Top</div>
      <div class="item">Aligned</div>
      <div class="item">Items</div>
    </div>

    <h2>align-items-center</h2>
    <div class="d-flex align-items-center box">
      <div class="item">Center</div>
      <div class="item">Aligned</div>
      <div class="item">Items</div>
    </div>

    <h2>align-items-end</h2>
    <div class="d-flex align-items-end box">
      <div class="item">Bottom</div>
      <div class="item">Aligned</div>
      <div class="item">Items</div>
    </div>
  </div>
</body>
</html>

Output

Three horizontal rows each inside a blue-bordered box 100px tall: the first row's items aligned at top, second row's items vertically centered, third row's items aligned at bottom.

⚠️

Common Pitfalls

Common mistakes when using align-items in Bootstrap include:

Not adding d-flex to the container, so flexbox is not enabled and alignment classes have no effect.
Using align-items on non-flex containers.
Expecting align-items to control horizontal alignment (it controls vertical alignment).
For vertical flex direction (flex-column), align-items aligns horizontally, which can confuse beginners.

Wrong example: Missing d-flex:

html

<div class="align-items-center" style="height: 100px; border: 1px solid #ccc;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<p><strong>Right example:</strong> Added <code>d-flex</code>:</p>
<div class="d-flex align-items-center" style="height: 100px; border: 1px solid #ccc;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Output

First box: items stacked normally with no vertical alignment inside the box. Second box: items horizontally in a row and vertically centered inside the box.

📊

Quick Reference

Class	Effect
d-flex	Enables flexbox on container
align-items-start	Align items to the top
align-items-center	Align items vertically centered
align-items-end	Align items to the bottom
align-items-baseline	Align items along their text baseline
align-items-stretch	Stretch items to fill container height (default)

✅

Key Takeaways

Always add d-flex to enable flexbox before using align-items classes.

align-items controls vertical alignment of flex items inside a flex container.

Use align-items-start, align-items-center, or align-items-end to align items top, center, or bottom respectively.

Remember align-items affects vertical alignment in row direction and horizontal alignment in column direction.

Check your container's display and flex direction to predict how align-items will behave.