How to set column in center using Bootstrap 5?
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.
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.