How to Align Text in Bootstrap Column ?

Last Updated : 30 Jul, 2024

In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired class to the column's content to achieve the desired text alignment effortlessly.

Table of Content

Using Text Alignment Classes
Using Flex Alignment

Using Text Alignment Classes

In this approach, we have used to align text within a Bootstrap column by utilizing text alignment classes like text-start, text-center, and text-end.

Syntax:

<div class="col text-center">

Example: This example describes aligning text in Bootstrap columns using Text Alignment Classes.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Text Alignment</title>
	<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet">
</head>

<body>
	<div class="container mt-5">
		<h1 class="text-center text-success">GeeksforGeeks</h1>
		<h3 class="text-center">Using Text Alignment Classes</h3>
		<div class="row">
			<div class="col text-center border border-dark border-2 p-5">
				<h4 class="text-danger">Text Center Alignment</h4>
				<p>
					Bootstrap is a popular open-source
					CSS framework for developing responsive
					and mobile-first web pages. It simplifies
					the web development process by providing
					a set of pre-designed components and utilities.
				</p>
			</div>
			<div class="col text-justify border border-dark border-2 p-5">
				<h4 class="text-danger">Text Justify Alignment</h4>
				<p>
					Bootstrap is a popular open-source CSS
					framework for developing responsive and
					mobile-first web pages. It simplifies the
					web development process by providing a set
					of pre-designed components and utilities.
				</p>
			</div>
		</div>
	</div>
</body>

</html>

Output:

Screenshot-2024-02-16-162450

Using Flex Alignment

In this approach, we are using the Flex Alignment which uses the d-flex, flex-column, and align-items-* classes within the col elements. This aligns the three columns with the center, start and end text alignments.

Syntax:

<div class="col d-flex flex-column align-items-center">

Example: This example describes aligning text in Bootstrap columns using Flex Alignment.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>Text Alignment</title>
	<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet">
</head>

<body>
	<div class="container mt-5">
		<h1 class="text-center text-success">
			GeeksforGeeks
		</h1>
		<h3 class="text-center">
			Using Flex Alignment
		</h3>
		<div class="row">
			<div class="col d-flex flex-column 
						align-items-center border 
						border-dark p-4">
				<h4 class="text-center text-danger">
					Center Alignment
				</h4>
				<p class="text-center">
					GeeksforGeeks is a computer science portal for geeks.
					It provides well-written, well-thought, and
					well-explained solutions for programming problems.
				</p>
			</div>
			<div class="col d-flex flex-column 
						align-items-start border 
						border-dark p-4">
				<h4 class="text-start text-danger">
					Start Alignment
				</h4>
				<p class="text-start">
					GeeksforGeeks is a computer science portal for geeks.
					It provides well-written, well-thought, and
					well-explained solutions for programming problems.
				</p>
			</div>
			<div class="col d-flex flex-column 
						align-items-end border 
						border-dark p-4">
				<h4 class="text-end text-danger">
					End Alignment
				</h4>
				<p class="text-end">
					GeeksforGeeks is a computer science portal for geeks.
					It provides well-written, well-thought, and
					well-explained solutions for programming problems.
				</p>
			</div>
		</div>
	</div>
</body>

</html>

Output:

Screenshot-2024-02-15-at-14-12-58-Example-2

How to col align right in Bootstrap 5 ?

gauravggeeksforgeeks

Improve

Article Tags :

How to Align Text in Bootstrap Column ?

Using Text Alignment Classes

Syntax:

Using Flex Alignment

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?