Approach 3 Using flexbox utilities
To center a column using Bootstrap’s flexbox utilities, apply d-flex justify-content-center to the column’s parent, creating a flex container with content centered horizontally, thus centering the column within it.
Example: In this example we are using Bootstrap’s flexbox utilities: d-flex justify-content-center, centering a column horizontally within its container, visually marked by the border.
<!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 class="col-md-6
d-flex justify-content-center border">
<div style="height: 200px; background-color: #28a745;">
Centered Column
</div>
</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: