Bootstrap 5 Text Transform Last Updated : 04 Apr, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Text transform classes modify the appearance of text by altering its capitalization. These classes provide options like lowercase, uppercase, and capitalize, enabling consistent styling across various components and layouts. Bootstrap 5 Text Transform Classes: Class NameDescriptiontext-lowercaseSets the text to lowercase.text-uppercaseSets the text to uppercase.text-capitalizeSets the text to capitalize each word.Syntax: <tag class="text-*">...</tag>Examples of Bootstrap 5 Text TransformExample 1: In this example, we demonstrates the usage of Bootstrap 5's text transform utility classes to modify the case of text content, showcasing both the default and lowercase transformations. 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="m-2"> <h1 class="text-success"> Bootstrap 5 Text Transform </h1> <u>Text transform: not used</u> <p>A COMPUTER SCIENCE PORTAL FOR GEEKS</p> <!-- Bootstrap Font Size classes used --> <u>Text transform: lowercase</u> <p class="text-lowercase"> A COMPUTER SCIENCE PORTAL FOR GEEKS </p> </body> </html> Output: Bootstrap 5 Text Transform Example Output Example 2: In this example, we use Bootstrap 5's text transform utility classes: text-lowercase, text-uppercase, and text-capitalize, demonstrating various case transformations applied to text content. 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="m-2"> <h1 class="text-success"> Bootstrap 5 Text Transform </h1> <!-- Bootstrap Font Size classes used --> <u>Text transform: lowercase</u> <p class="text-lowercase"> A COMPUTER SCIENCE PORTAL FOR GEEKS</p> <u>Text transform: uppercase</u> <p class="text-uppercase"> a computer science portal for geeks</p> <u>Text transform: capitalize</u> <p class="text-capitalize"> a computer science portal for geeks</p> </body> </html> Output: Bootstrap 5 Text Transform Example Output Comment More infoAdvertise with us Next Article Bootstrap 5 Text S skyridetim Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Text Truncation Bootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation.Text Truncation is used to truncate long statements and paragraphs using 2 min read Bootstrap 5 Text In this article, we will discuss how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities. Text alignment: We can use text alignment classes to align the text in different positions in different viewports.Text wrapping and ove 4 min read Bootstrap 5 Text Word break Text Word break is used to break the long string. Prevent long strings of text from breaking your components' layout by using text-break. This class is deprecated because a line break is not possible in Arabic, and the most used RTL language is Arabic. Bootstrap 5 Text Word break Class: text-break: 2 min read Bootstrap 5 Text Word break Text Word break is used to break the long string. Prevent long strings of text from breaking your components' layout by using text-break. This class is deprecated because a line break is not possible in Arabic, and the most used RTL language is Arabic. Bootstrap 5 Text Word break Class: text-break: 2 min read Bootstrap 5 Flex Wrap Bootstrap 5's flex-wrap utility enables flexible layout control, allowing items to wrap as needed within a flex container. It offers options like nowrap, wrap, and wrap-reverse for responsive design.Bootstrap 5 Flex Wrap Classes:CSS ClassDescriptionflex-wrapChanges how flex items wrap in a flex cont 2 min read Bootstrap 5 Tutorial Bootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream 6 min read Like