Open In App

Bootstrap 5 Text Reset color

Text Reset color is used to reset the text color or linked text’s color. We all know by linking any text we got a blue-colored text. Sometimes we want to remove that color and make it looks like normal text.

Text Reset Color Class:



Syntax:

<tag class="text-reset">...</tag>

Example 1: Below example illustrates the Text Reset color in Bootstrap 5. In this example, we will link two texts and use a text-reset class on the second linked text so you can understand the difference clearly by checking the comment.






<!DOCTYPE html>
<html>
 
<head>
    <link crossorigin="anonymous" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
 
<body>
    <div class="text-center">
    <h1 class="text-success">
        Geeksforgeeks
    </h1>
    <p>
        A Computer Science Portal for
        <!-- Bootstrap text-reset class not used -->
        <a href="#">Geeks</a>
    </p>
 
    <p>
        <!-- Bootstrap text-reset class used -->
        <a href="#" class="text-reset">Geeks</a>
        Learning Together
    </p>
</body>
 
</html>

Output:

Bootstrap 5 Text Reset Color

Example 2: In this example, we will link two texts and use a text-reset class on the second linked text so that you can understand the difference clearly. 




<!DOCTYPE html>
<html>
 
<head>
    <link crossorigin="anonymous" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC">
</head>
 
<body class="text-center">
    <h1 class="text-success">
        Geeksforgeeks
    </h1>
 
    <p class="text-muted">
        Bootstrap 5 text-reset not used:
        <a href="#">GeeksforGeeks</a>
    </p>
     
    <p class="text-muted">
        Bootstrap 5 text-reset used:
        <a href="#" class="text-reset">
            GeeksforGeeks</a>
    </p>
</body>
 
</html>

Output:

Bootstrap 5 Text Reset Color

Reference: https://getbootstrap.com/docs/5.0/utilities/text/#reset-color


Article Tags :