Skip to content
Related Articles

Related Articles

How to set column in center using Bootstrap 5?
  • Last Updated : 30 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

The goal here is to center 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’s 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.




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




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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :