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.
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:
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:
Similar Reads
How to col align right in Bootstrap 5 ? Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to align columns in a row on text end using Bootstrap 5 ? In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hove
2 min read
How to set the button alignment in Bootstrap ? Bootstrap buttons are no different from any other DOM elements of an HTML document. Aligning them is more likely the same as aligning paragraphs, divs and sections. Here are some of the scenarios that one can encounter.Here we are using some common methods:Table of ContentButtons in container classB
4 min read
How to align pills to center in Bootstrap ? Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline-
2 min read
How to Center the Text in Bootstrap ? To center text in Bootstrap, you can use the class "text-center" on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts. Table of Cont
2 min read