Horizontal alignment

Bootstrap center (horizontal align)

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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