How to Center a Column in Bootstrap?
Columns are an important component of a webpage. Bootstrap 5 columns are built with flexbox architecture. In a grid layout, all the contents go directly to the columns.
In this tutorial, we will learn to center a column in Bootstrap.
Center aligning the columns
In Bootstrap, we center the columns either horizontally on the x-axis or vertically on the y-axis.
To center align the columns horizontally, we can use the flexbox alignment utilities. Use .justify-content-center to align the column in the center. But if you want to align columns to center vertically then use align-items-center to the parent class.
Example: Center align the columns horizontally in Bootstrap 5
In this example, we will center align columns horizontally along the x-axis using bootstrap classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2 class="text-center">Center align the columns horizontally</h2>
<div class="container">
<div class="row justify-content-center bg-light">
<div class="col-4 border border-primary ">
One of two columns
</div>
<div class="col-4 border border-primary">
One of two columns
</div>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Vertically align the columns to the center using Bootstrap 5
In this example, we will vertically align the columns to the center of the row. So, we will use the align-items-center inside the row.
Conclusion
Here in this tutorial, we have learned to center the columns in Bootstrap 5. The columns can be horizontally and vertically aligned using flexbox alignment utilities.
