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 button

The same as above, add the .text-center to the parent element of the button to center it. 


          <div class="text-center">
            <button type="button" class="btn btn-primary">Primary</button>
          </div>

Center column

By using flexbox you can center the entire the column of the grid.

This is a row
This column (.col-md-6) is centered 

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

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
Flex item
Flex item
Flex item

          <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