Signup/Sign In

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">
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="" rel="stylesheet" >
	<script src="" ></script>
	<script src=""></script>
    <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 class="col-4 border border-primary">
		  One of two columns


Here is the output of the above program.

center align column horizontally

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.


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.