Horizontal alignment

Angular 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

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

Show code

        
            
              <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 column of the grid.

        
            
              <div class="row d-flex justify-content-center">
                <div class="col-md-6">
                  This column is centered
                </div>
              </div>
            
        
    

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

Related resources