Horizontal alignment

eCommerce horizontal alignment

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.

I am centered.



      <div class="text-center">
        <p>I am centered.</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.jpg" 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.

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

    

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.

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>
  
        

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