Bootstrap 5 Text Alignment
Last Updated :
04 Apr, 2024
Bootstrap 5 text alignment classes are used to realign components with the start, end, and center variation. It can be used in the same viewport width breakpoints as the grid system.
Bootstrap 5 Text alignment Classes: Here * can be replacebale by start, end & center and ** can be replaceble by sm, md, lg & xl
| Class Name | Description |
|---|
| text-* | Aligns the component’s text to the start, center, or end. |
| text-**-* | Aligns the component’s text to the start, center, or end based on the screen size breakpoints. |
Syntax:
<tag class="text-start">...</tag>
Note:
This class will work on paragraphs, headings, and anchor elements.
The below examples illustrate the Text Alignment:
Examples of Bootstrap 5 Text Alignment
Example 1: In this example, we will align the text to the right by using the text-end class.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="ms-2 me-2">
<strong class="text-center">
<p>Bootstrap 5 Text alignment</p>
</strong>
<p class="text-end">
Geeks Learning Together
</p>
<p class="text-end">
A Computer Science Portal for Geeks
</p>
</body>
</html>
Output:
Bootstrap 5 Text Alignment Example Output
Example 2: In this example, we will use all the alignment classes to see the impact of these classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="ms-2 me-2">
<strong>
<p class="text-center">
Bootstrap 5 Text alignment
</p>
</strong>
<p class="text-end">
Geeks Learning Together
</p>
<p class="text-right">
A Computer Science Portal for Geeks
</p>
</body>
</html>
Output:
Bootstrap 5 Text Alignment Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...