Bootstrap 5 Text Alignment Last Updated : 04 Apr, 2024 Comments Improve Suggest changes Like Article Like Report 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 NameDescriptiontext-*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 AlignmentExample 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/[email protected]/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/[email protected]/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 Comment More infoAdvertise with us Next Article Bootstrap 5 Columns Alignment S skyridetim Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Cards Text Alignment A card is a flexible and extensible content container that shows the information overview shortly. We can resize the card container, align text as we want, and add images. We can change the alignment of the text of the card using text align classes. We can change specific entity alignment. We can us 2 min read Bootstrap 5 Vertical Alignment Bootstrap 5 Vertical Alignment facilitates aligning inline, inline-block, inline-table, and table cell elements vertically within their container. It offers classes for top, bottom, middle alignment, and stretching content to fill vertical space, enhancing layout flexibility in web development. ifra 3 min read Bootstrap 5 Table Vertical alignment What is Bootstrap Tables?Bootstrap Tables are this is useful to make tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles. Bootstrap provides us with functionality that helps us to vertically align these table cells' contents. By default, 3 min read Bootstrap 5 Columns Alignment In bootstrap 5, we can use flexbox alignment utilities to align our columns horizontally and vertically without using CSS. The following are the possible alignment ways: Vertical alignment: For aligning the column vertically we use the flexbox utilities to get desired alignment system.Horizontal ali 2 min read Bootstrap 5 Flex Align items Bootstrap 5 Flex Align items to change the alignment of flex items on the cross-axis using align-items classes. The CSS align-items property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. iframe { width: 100%; height: 500px;} @med 3 min read Bootstrap Forms Alignment Types Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development. Bootstrap Fo 3 min read Like