Open In App

How to set column in center using Bootstrap 5?

Improve
Improve
Like Article
Like
Save
Share
Report

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

 

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



Last Updated : 05 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads