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 overflow: To wrap a text we need to use the .text-wrap class and to prevent a text from wrapping we need to usethe .text-nowrap class.
Text transform: It is used to convert a given text into lower case or upper case. It can also transform the first letter of every word into an uppercase which is called capitalized text.
Font size: To change the size of the font instead of using heading classes(e.g., .h1-.h6) we can use .fs classes to change the size of the font.
Font weight and italics: These utilities are used to change the weight and style of the text abbreviated as .fw-* and to change the style of the text we can use utilities that are abbreviated as .fst-*
Line Height: To change the height of the line we can use utilities that are abbreviated as .lh-*.
Line Height: To change the height of the line we can use utilities that are abbreviated as .lh-*.
Text Decoration: These classes can be used to decorate the text in different ways. eg. underline.
Sass: This involves the Sass map and spacing utilities that are declared in Utility API.
Example 1: Here is an example of some bootstrap 5 text utilities.