Bootstrap 5 Text Decoration

Last Updated : 08 Apr, 2024

Bootstrap 5 Text decoration classes are used to decorate the text components, like underlining, strike, etc. These classes can be used in many cases like on anchor tag sometime we do not want any underline.

Text Decoration Classes:

Class Name	Description
text-decoration-underline	Used to put an underline on the text.
text-decoration-line-through	Used to put a line through the text.
text-decoration-none	Used to remove all decorations from the text.

Syntax:

<tag class="text-decoration-*">...</tag>

Example 1: Below example illustrate the Text decoration in Bootstrap 5. In this example, we will use an underlined class on a single text.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link
            rel="stylesheet"
            crossorigin="anonymous"
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        />
    </head>

    <body>
        <p class="text-center">
            Bootstrap 5 Text Decoration
        </p>

        <!-- Bootstrap text-decoration-underline 
        class used -->
        <p class="text-decoration-underline text-center">
            GeeksforGeeks A Computer Science Portal for Geeks
        </p>
    </body>
</html>

Output:

Bootstrap 5 Text Decoration Example Output

Example 2: In this example we use Bootstrap’s “text-decoration-none” class removes underlines from the hyperlink. Another class, “text-decoration-line-through”, strikes through text, applied to the paragraph element.

HTML

<!DOCTYPE html>
<html>

<head>
    <link crossorigin="anonymous" 
          rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>

<body>
    <h3 class="text-center"> 
        Bootstrap 5 Text Decoration
    </h3>
    <h3 class="text-center">
       
        <a href="www.geeksforgeeks.org" 
            class="text-decoration-none">
          GeeksforGeeks
        </a>
    </h3>

    <!-- Bootstrap text-decoration-line-through 
        class used -->
    <p class="text-decoration-line-through text-center">
        A Computer Science Portal for Geeks
    </p>

</body>

</html>