Bootstrap Align Items

While justify-content handles alignment on the Main Axis (usually horizontal), the align-items utilities control the alignment on the Cross Axis (usually vertical). This is the secret to flawlessly centering elements vertically inside any container!

Crucial Rule: For vertical alignment to work, the parent container must have a defined height that is taller than the internal items. Without extra empty space, the items cannot visually move up or down!

Cross Axis Alignment

Apply these classes directly to the .d-flex parent container to dictate how every single child behaves vertically.

<!-- Container must establish height, then flawlessly center children vertically -->
<div class="d-flex align-items-center" style="height: 200px;">
    <div>Perfect Vertical Center</div>
</div>

The Stretch Behavior

By default, if you don't declare any alignment rules, Flexbox automatically applies .align-items-stretch. This explicitly commands every child item to dynamically grow its height until it safely matches the tallest sibling item (or hits the container's ceiling).

<!-- Forces all child cards to organically match the heights of the largest card! -->
<div class="d-flex align-items-stretch">
    <div class="card">Short description</div>
    <div class="card">Massive long description paragraph inside this one!</div>
</div>

Single Items (.align-self)

What if you want the container to align everything at the top (.align-items-start), but you need just one specific item to drop directly to the bottom? You can safely override the parent container's rule by applying an .align-self-* class directly to the specific child element!

<!-- Parent demands everything sit at the top -->
<div class="d-flex align-items-start" style="height: 150px;">
    
    <!-- Child perfectly obeys the top-rule -->
    <div>Sits correctly at the top</div>

    <!-- Child aggressively breaks the rule gracefully to sit at the bottom! -->
    <div class="align-self-end">I rebel natively!</div>

</div>