Horizontal alignment

Bootstrap center (horizontal align)

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

You can center any element (text, images, div, buttons) horizontally by using center utilities or flexbox. See the examples below to find out how.

Center text

Just add the class .text-center to the parent element of the text to center content horizontally.

        
            

        <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 Edit in sandbox

        
            

        <div class="text-center">

          <img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" class="img-fluid" alt="">

        </div>

      
        
    

Center button

The same as above, just 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.

        
            

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

      
        
    

Justify content

For more advanced options use our Flexbox utilities

You can 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 between start (browser default), end, center, between, or around.

        
            

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

      
        
    

Responsive variations also exist for justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around