How to Align Text in Bootstrap Column ?
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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <h1 class="text-center text-success">w3wiki</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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body> <div class="container mt-5"> <h1 class="text-center text-success"> w3wiki </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"> w3wiki is a computer science portal for Beginner. 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"> w3wiki is a computer science portal for Beginner. 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"> w3wiki is a computer science portal for Beginner. It provides well-written, well-thought, and well-explained solutions for programming problems. </p> </div> </div> </div></body></html> |
Output:
Contact Us