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.
<!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:
Example 2: In this example, we will use all the alignment classes to see the impact of these classes.
<!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
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: