Horizontal alignment
Bootstrap 5 Horizontal alignment
Utilities for horizontal alignment.
Note: For advanced usage read our Flexbox docs.
Center text
To center text add .text-center class to the parent element
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
<div class="text-center">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic
delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa
reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
</p>
</div>
Center image
You can also center the image by adding the .text-center class to the image's
parent element.
<div class="text-center">
<img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" class="img-fluid" alt="" />
</div>
Center column
By using flexbox you can center the entire the column of the grid.
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
This column is centered
</div>
<!--Grid column-->
</div>
<!--Grid row-->
Flexbox options
Use justify-content utilities on flexbox containers to change the alignment of
flex items on the main axis (the x-axis to start, y-axis if
flex-direction: column). Choose from start (browser default),
end, center, between, around, or
evenly.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Responsive variations also exist for justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly