Open In App

Bootstrap 5 Text

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 23 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads