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:
- text-reset: This class is used to reset the text color.
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"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
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:
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"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
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:
Reference: https://getbootstrap.com/docs/5.0/utilities/text/#reset-color