Bootstrap - Bootstrap Vertical Alignment Utilities

Bootstrap Vertical Alignment Utilities are used to control how inline, inline-block, and table-cell elements are positioned vertically relative to other elements. They are especially useful when text, icons, images, or other inline elements need to be aligned neatly along the vertical axis.

Bootstrap provides predefined classes such as .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, and .align-text-bottom. These classes are based on the CSS vertical-align property, allowing developers to control vertical positioning without writing custom CSS.

1. .align-baseline

The .align-baseline class aligns an element with the baseline of its parent element.

<span class="align-baseline">Baseline</span>

The baseline is the imaginary line on which most characters sit in a line of text. This option is useful when different inline elements need to follow the normal text baseline.

2. .align-top

The .align-top class aligns the top of an element with the top of the line box or table cell.

<span class="align-top">Top</span>

This can be useful when an image or inline element needs to appear toward the upper part of the surrounding content.

3. .align-middle

The .align-middle class vertically aligns an element with the middle of the surrounding text or line.

<span class="align-middle">Middle</span>

This is particularly useful when placing small images, icons, or other inline elements next to text.

For example:

<p>
    Text
    <img src="image.jpg" class="align-middle" alt="Example">
    More text
</p>

The image will be positioned around the vertical middle of the text line.

4. .align-bottom

The .align-bottom class aligns the bottom of an element with the bottom of the surrounding line or table cell.

<span class="align-bottom">Bottom</span>

This can be useful when multiple inline elements have different heights and their lower edges need to be aligned.

5. .align-text-top

The .align-text-top class aligns the top of an element with the top of the parent element's text.

<span class="align-text-top">Text Top</span>

This differs slightly from .align-top because it specifically considers the text area of the parent rather than simply aligning against the top of the line box.

6. .align-text-bottom

The .align-text-bottom class aligns the bottom of an element with the bottom of the parent element's text.

<span class="align-text-bottom">Text Bottom</span>

It is useful when an inline element needs to align with the lower portion of surrounding text.

Example Using Multiple Alignment Classes

The following example demonstrates several Bootstrap vertical alignment utilities:

<div>
    <span class="align-baseline">Baseline</span>
    <span class="align-top">Top</span>
    <span class="align-middle">Middle</span>
    <span class="align-bottom">Bottom</span>
    <span class="align-text-top">Text Top</span>
    <span class="align-text-bottom">Text Bottom</span>
</div>

Each element receives a different vertical alignment behavior.

Vertical Alignment with Images

Vertical alignment utilities are commonly useful when working with images and text.

<p>
    Bootstrap
    <img src="logo.png" class="align-middle" alt="Bootstrap Logo">
    Framework
</p>

Here, .align-middle positions the image relative to the surrounding text, helping the image appear naturally within the text line.

Vertical Alignment in Tables

The vertical-align CSS property is also important when working with table cells. Bootstrap alignment utilities can be used to control how content is positioned vertically within table cells when the relevant utility applies.

For example:

<table class="table">
    <tr>
        <td class="align-top">Top aligned content</td>
        <td class="align-middle">Middle aligned content</td>
        <td class="align-bottom">Bottom aligned content</td>
    </tr>
</table>

This allows content in cells with different heights to be positioned according to the desired alignment.

Important Difference from Flex Alignment

Bootstrap vertical alignment utilities should not be confused with Flexbox alignment utilities.

Classes such as:

.align-items-center

are Flexbox utilities and are used to align flex items along the cross axis.

In contrast:

.align-middle

is based on the CSS vertical-align property and is primarily intended for inline, inline-block, and table-cell elements.

For example:

<div class="d-flex align-items-center">
    <span>Centered Flex Item</span>
</div>

Here, align-items-center is appropriate because the parent is a flex container.

On the other hand:

<p>
    Text <span class="align-middle">Aligned Element</span>
</p>

uses align-middle to control inline vertical alignment.

When to Use Vertical Alignment Utilities

These utilities are useful when:

• Aligning images with text

• Positioning inline elements within a line of text

• Controlling content placement inside table cells

• Aligning elements with text baselines

• Avoiding small custom CSS rules for common vertical-alignment requirements

• Creating consistent alignment between elements of different heights

Limitations

The vertical-align property does not work as a general-purpose vertical-centering mechanism for every HTML element. For block-level layouts, Flexbox or Grid utilities are generally more appropriate.

For example, if you need to vertically center content inside a container, you would typically use Bootstrap's Flex utilities:

<div class="d-flex align-items-center">
    <div>Vertically centered content</div>
</div>

Here, align-items-center is preferable to .align-middle.

Summary

Bootstrap Vertical Alignment Utilities provide ready-made classes for controlling the vertical alignment of inline, inline-block, and table-cell content. The main classes are .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-top, and .align-text-bottom.

The key point is that these utilities are based on CSS vertical-align. They should therefore be used for appropriate inline and table-cell alignment situations rather than as a replacement for Flexbox or Grid-based layout techniques.