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 strat, end & center and ** can be replaceble by sm, md, lg & xl
- text-*: This class is used to align the component to the start, center, or end.
- text-**-*: This class is used to align the component to the start, center, or end depending on the screen size.
Syntax:
<tag class="text-start">...</tag>
Note: This class will work on paragraphs, headings, and anchor elements.
The below examples illustrate the 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= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="ms-2 me-2"> <h1 class="text-success text-center"> Geeksforgeeks </h1> <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.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="ms-2 me-2"> <h1 class="text-success text-center"> Geeksforgeeks </h1> <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:
Reference: https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment
Please Login to comment...