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=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3" style="width: 1700px;">
<h1 style="color: green;">
GeeksforGeeks
</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:
Bootstrap 5 text
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=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3" style="width: 1700px;">
<h1 style="color: green;">
GeeksforGeeks
</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:
Bootstrap 5 text
Reference:https://getbootstrap.com/docs/5.0/utilities/text/