📏 Bootstrap 5 – Vertical Alignment Utilities: Align Items with Ease
🧲 Introduction – Why Use Bootstrap 5 Vertical Alignment Utilities?
When building responsive layouts, aligning content vertically can be tricky—especially within table cells, flex containers, or inline elements. Bootstrap 5 offers vertical alignment utilities that let you easily align items top, middle, bottom, or baseline across different containers using utility classes like .align-middle, .align-items-center, and .vstack.
🎯 In this guide, you’ll learn:
- How to vertically align inline, table, and flex elements
- Use
.align-*and flexbox utilities for vertical centering - Stack content using
.vstackandflex-column - Combine vertical alignment with spacing and positioning
✅ Example 1 – Vertical Alignment in Table Cells
<table class="table" style="height: 150px;">
<tr>
<td class="align-top">Top Aligned</td>
<td class="align-middle">Middle Aligned</td>
<td class="align-bottom">Bottom Aligned</td>
</tr>
</table>
| Class | Effect |
|---|---|
align-top | Aligns content to top |
align-middle | Vertically centers content |
align-bottom | Aligns content to bottom |
📌 Works inside <td> and <th> in tables.
✅ Example 2 – Flexbox Vertical Centering with .align-items-center
<div class="d-flex align-items-center bg-light" style="height: 150px;">
<div class="bg-primary text-white p-3">Vertically Centered</div>
</div>
| Class | Description |
|---|---|
d-flex | Activates flexbox |
align-items-center | Vertically centers child elements |
✅ Best for aligning content within headers, sidebars, or cards.
✅ Example 3 – Using .vstack for Vertical Stack Layout
<div class="vstack gap-2">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>
| Class | Purpose |
|---|---|
vstack | Applies vertical flex layout (flex-column) |
gap-2 | Adds space between stacked elements |
🧠 Great for menus, form groups, and mobile layout sections.
✅ Example 4 – Align Self in Flex Containers
<div class="d-flex" style="height: 100px;">
<div class="align-self-start bg-warning p-2">Top</div>
<div class="align-self-center bg-success p-2">Middle</div>
<div class="align-self-end bg-info p-2">Bottom</div>
</div>
| Class | Function |
|---|---|
align-self-start | Align this item to the top |
align-self-center | Center this item vertically |
align-self-end | Align this item to the bottom |
📌 Lets you override alignment for individual flex items.
📘 Bootstrap 5 Vertical Alignment Class Reference
| Context | Utility Classes |
|---|---|
| Tables | align-top, align-middle, align-bottom |
| Flexbox | align-items-start, align-items-center, align-items-end |
| Flex Self | align-self-start, align-self-center, align-self-end |
| Stacking | vstack (for vertical stacking of items) |
🧪 Combine with justify-content-* for full horizontal + vertical alignment.
🛠️ Best Practices for Vertical Alignment
| Best Practice | Why It Helps |
|---|---|
Use align-items-center with flex | Simplifies vertical alignment in rows or cards |
Use align-self-* for specific overrides | Gives granular control on individual items |
| Avoid using vertical alignment with inline elements | Use flexbox or table-cell for consistent behavior |
Combine vstack and gap-* | Cleaner vertical UI stacks without margins |
| Always set height when using centering | Flex needs height to calculate vertical space |
📌 Summary – Recap & Next Steps
Bootstrap 5 makes vertical alignment intuitive and flexible using both classic and modern approaches. With table alignment classes, flex-based utilities, and vertical stacks, you can vertically center, bottom-align, or top-align content with ease—no custom CSS needed.
🔍 Key Takeaways:
- Use
.align-top,.align-middle,.align-bottominside tables - Flexbox classes like
.align-items-centeralign content vertically in rows - Use
.vstackto stack elements vertically with spacing .align-self-*offers item-level alignment inside flex containers- Always test alignment responsiveness across devices
⚙️ Ideal for headers, profile cards, feature sections, forms, and stacked content blocks.
❓ FAQs – Bootstrap 5 Vertical Alignment Utilities
❓ What’s the difference between align-items-* and align-self-*?
✅ align-items-* affects all flex items in a container, while align-self-* adjusts alignment of a specific item only.
❓ Can I vertically center text inside a div?
✅ Yes. Use d-flex align-items-center on the parent and ensure it has a defined height.
❓ Does align-middle work outside tables?
✅ No. It’s designed for use within <td> or <th> elements in a table.
❓ When should I use .vstack instead of flex-column?
✅ .vstack is a shorthand for d-flex flex-column. It’s cleaner, supports gap-*, and is preferred for vertical UI stacking.
Share Now :
