Vertical alignment
Vue 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 (also on the parent element) .align-items-center to align content vertically and .justify-content-center to align content horizontally.
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
Only vertically
Add .d-flex to the parent element to enable flex mode. Then use (also on the parent element) .align-items-center to align content vertically
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
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
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
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