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).
<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