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