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.

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;">
            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:

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;">
            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:

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

Bootstrap 5 Navbar Text

ayushdey110

Improve

Article Tags :

Bootstrap 5 Text

Similar Reads

Thank You!

What kind of Experience do you want to share?