Skip to content
Related Articles

Related Articles

Improve Article

How to set column in center using Bootstrap 5?

  • Last Updated : 14 May, 2021

The goal here is to centre a column in bootstrap. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. There are two approaches to centering a column <div> in Bootstrap.

Approach 1 (offsets): 
 

The first approach uses bootstrap offset class. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that’s (12-2)/2. The below example implements this.

 

html




<!DOCTYPE html>
<html>
    <link rel="stylesheet"
          href=
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous" />
    <body>
        <div class="container">
            <div class="row">
                <div style="height: 200px;"
                     class="col-md-6 offset-md-3
                            text-center bg-success">.
                  col-md-6 .offset-md-3</div>
            </div>
        </div>
    </body>
</html>

Output



Approach 2(Margin auto): 
 

Setting left and right margins to auto will centre the div with respect to its parent element. The left and right margin can be set with .ml-auto and .mr-auto class respectively. The below example implements this.

 

html




<!DOCTYPE html>
<html>
    <link rel="stylesheet"
          href=
          integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous" />
    <body>
        <div class="container">
            <div class="row">
                <div style="height: 200px;"
                     class="mr-auto ml-auto
                            text-center bg-success">
                  .ml-auto .mr-auto</div>
            </div>
        </div>
    </body>
</html>

Output




My Personal Notes arrow_drop_up
Recommended Articles
Page :