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.
Example: In this example we centers a column using Bootstrap’s margin auto classes: mr-auto and ml-auto, achieving horizontal centering within a container.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<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:
How to set column in center using Bootstrap?
Setting a column in the center using Bootstrap refers to the process of horizontally aligning a column within its parent element using Bootstrap’s predefined classes or utilities. This alignment ensures that the column is positioned centrally within its parent container on the webpage.
There are some approaches to Setting a column in the center using Bootstrap:
Table of Content
- Approach 1: Using the offset class
- Approach 2: Margin auto
- Approach 3: Using flexbox utilities: