How to set vertical alignment in Bootstrap ?

Last Updated : 08 May, 2024

Setting vertical alignment in Bootstrap refers to the process of positioning elements along the vertical axis within a layout or container. This ensures consistent and visually appealing alignment of content, such as text, images, or buttons, relative to each other or to the container’s boundaries. It helps maintain balance and readability in the design.

Here, we will discuss 2 built-in classes:

Table of Content

Using align-items CSS class:
Using class d-flex with class align-items-center

Let’s understand both classes through examples.

Method 1: Using align-items CSS class:

The align-items CSS class in Bootstrap sets the vertical alignment of flexbox items within a container. It aligns items along the cross-axis, allowing for easy vertical centering of content.

Example: In this example we use Bootstrap to create a container with a row and a column. The column contains a heading “GeeksforGeeks” and has a green background color, vertically centered on the page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" 
		  content="width=device-width, 
		           initial-scale=1" />

	<link rel="stylesheet" 
		  href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
	</script>
</head>

<body>
	<div class="container">
		<div class="row align-items-center 
		            bg-success text-light min-vh-100" 
		    >
			<div class="col-md-12">
				<h1>GeeksforGeeks</h1>
			</div>
		</div>
	</div>
</body>

</html>

Output:

setting vertical alignment in Bootstrap

Method 2: Using class d-flex with class align-items-center

The approach involves applying the Bootstrap classes `d-flex` and `align-items-center` to a container element. This combination creates a flex container with its children aligned vertically at the center, facilitating easy vertical alignment of content.

Example: In this example we use Bootstrap to create a flexible container with a heading “GeeksforGeeks” centered both horizontally and vertically on the page, with a green text color.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
	</script>
</head>

<body>
	<div class="d-flex align-items-center" style="min-height: 100vh">
		<div class="box w-100 text-success">
			<h1>GeeksforGeeks</h1>
		</div>
	</div>
</body>

</html>

Output:

setting vertical alignment in Bootstrap Example output

Bootstrap 5 Vertical Alignment

mishrapriyank17

Improve

Article Tags :

How to set vertical alignment in Bootstrap ?

Method 1: Using align-items CSS class:

Method 2: Using class d-flex with class align-items-center

Similar Reads

Thank You!

What kind of Experience do you want to share?