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 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.
HTML
<!DOCTYPE html> < html > < head > <!-- Load Bootstrap --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" > </ head > < body > < div class = "container mt-3" style = "width: 1700px;" > < h1 style = "color: green;" > w3wiki </ h1 > < p >< b >Text-Alignment</ b ></ p > < p class = "text-left" > Text will be aligned on left at all viewports sizes</ p > < p class = "text-center" > Text will be aligned on center at all viewports sizes</ p > < p class = "text-right" > Text will be aligned on right at all viewports sizes</ p > < p >< b >Text-wrapping</ b ></ p > <!-- Wrapping a Text--> < div class = "badge bg-primary text-wrap" > Text-wrap used here! </ div > <!-- Preventing a Text from Wrapping--> < div class = "text-nowrap" > Text-nowrap used here! </ div ></ br > < p >< b > Text-transform </ b ></ p > <!-- It will print the text in lower case--> < p class = "text-lowercase" >LOWER CASE</ p > <!-- It will print the text in upper case--> < p class = "text-uppercase" >upper case</ p > <!-- It will print the text in Capitalized Text--> < p class = "text-capitalize" >capitalized text</ p > < p >< b >Font-size</ b ></ p > < p class = "fs-1" >.fs-1 Text</ p > < p class = "fs-2" >.fs-2 Text</ p > < p class = "fs-3" >.fs-3 Text</ p > < p class = "fs-4" >.fs-4 Text</ p > < p class = "fs-5" >.fs-5 Text</ p > < p class = "fs-6" >.fs-6 Text</ p > </ div > </ body > </ html > |
Output:
Example 2: Here is an example to demonstrate some more bootstrap 5 text utilities.
HTML
<!DOCTYPE html> < html > < head > <!-- Load Bootstrap --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" > </ head > < body > < div class = "container mt-3" style = "width: 1700px;" > < h1 style = "color: green;" > w3wiki </ h1 > < p >< b >Font-weight and italics</ b ></ p > < p class = "fw-bold" > Text is in bold</ p > < p class = "fw-bolder" > Text is bolder than its parent element</ p > < p class = "fw-normal" > Text is in its normal weight</ p > < p class = "fw-light" > Text is in light weight</ p > < p class = "fw-lighter" > Text is lighter than its parent element</ p > < p class = "fst-italic" > Text is in italic</ p > < p class = "fst-normal" > Text is in normal style</ p > < p >< b >Line Height</ b ></ p > < p class = "lh-1" > In this article we are learning about text in bootstrap 5 and this line has a line height of 1 </ p > < p class = "lh-sm" > In this article we are learning about text in bootstrap 5 and this line has a small line height </ p > < p class = "lh-base" > In this article we are learning about text in bootstrap 5 and this line has a normal line height</ p > < p class = "lh-lg" > In this article we are learning about text in bootstrap 5 and this line has a large line height </ p > < p >< b > Monospace </ b ></ p > < p class = "font-monospace" >Monospace text</ p > < p >Normal text</ p > < p >< b >Text-decoration</ b ></ p > < p class = "text-decoration-underline" > Text has been underlined </ p > < p class = "text-decoration-line-through" > A line is going through a text </ p > < a href = "#" class = "text-decoration-none" > Text decoration has been removed </ a > </ div > </ body > </ html > |
Output:
Reference:https://getbootstrap.com/docs/5.0/utilities/text/