How to: Bootstrap column center

To center the column horizontally or vertically use Flexbox utilities. Add .d-flex .justify-content-center classes to the parent element of the column (it should be .row element ) to center it horizontally.

Useful resources:

• Flexbox Docs
• Flexbox Generator
• Horizontal Alignment Docs

Basic example

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

Variations

By manipulating the number of the centered column you can set its width and also define on which screen size it should be stretched full width.

This column has .col-xl-4 .col-lg-12 classes which makes it 6 column width on the screen larger than 1200px but on smaller screens it will stretch full width. Resize the browser window to see the effect.

See Breakpoint Docs to learn more about available configurations.

        
            
          <!--Grid row-->
          <div class="row d-flex justify-content-center">
            <!--Grid column-->
            <div class="col-xl-4 col-lg-12"></div>
            <!--Grid column-->
          </div>
          <!--Grid row-->