How to Align Text in Bootstrap Column ?
Last Updated :
19 Feb, 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=
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=
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:
Share your thoughts in the comments
Please Login to comment...