Vertical alignment

Bootstrap 5 Vertical alignment

Flexbox utilities for vertical alignment.

Note: For advanced usage read our Flexbox docs.

Both vertically and horizontally

Add .d-flex to the parent element to enable flex mode. Then use (alsso on the parent element) .align-items-center to align content vertically and .justify-content-center to align content horizontally. 


          <div
            class="border d-flex align-items-center justify-content-center"
            style="height: 350px;"
          >
            <button type="button" class="btn btn-primary">Example button</button>
          </div>

Only vertically

Add .d-flex to the parent element to enable flex mode. Then use (alsso on the parent element) .align-items-center to align content vertically 


          <div class="border d-flex align-items-center" style="height: 350px;">
            <button type="button" class="btn btn-primary">Example button</button>
          </div>

Flexbox options

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

          <div class="d-flex align-items-start">...</div>
          <div class="d-flex align-items-end">...</div>
          <div class="d-flex align-items-center">...</div>
          <div class="d-flex align-items-baseline">...</div>
          <div class="d-flex align-items-stretch">...</div>

Responsive variations also exist for align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch