VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-text/

⇱ Bootstrap 5 Text - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Text

Last Updated : 23 Jan, 2023

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 use the .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.

Output:

👁 Image
Bootstrap 5 text

Example 2: Here is an example to demonstrate some more bootstrap 5 text utilities. 

Output:

👁 Image
Bootstrap 5 text 

Reference:https://getbootstrap.com/docs/5.0/utilities/text/

Comment

Explore