Bootstrap 5 Text Decoration
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:
- text-decoration-underline: This class is used to put an underline on the text.
- text-decoration-line-through: This class is used to put a line on the text.
- text-decoration-none: This class is used to remove all the 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" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"></head><body> <h1 class="text-success text-center"> Geeksforgeeks</h1> <p class="text-center"> Geeks Learning Together </p> <!-- Bootstrap text-decoration-underline class used --> <p class="text-decoration-underline"> A Computer Science Portal for Geeks </p></body></html> |
Output:
Bootstrap 5 Text decoration
Example 2: Below example illustrate the Text decoration in Bootstrap 5. In this example, we will use the rest of the two classes.
HTML
<!DOCTYPE html><html><head> <link crossorigin="anonymous" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"></head><body> <h1 class="text-center"> <a href="www.geeksforgeeks.org" class="text-decoration-none"> Geeksforgeeks </a> </h1> <!-- Bootstrap text-decoration-line-through class used --> <p class="text-decoration-line-through text-center"> A Computer Science Portal for Geeks </p> <p class="text-center"> Geeks Learning Together </p></body></html> |
Output:
Bootstrap 5 Text decoration
Reference: https://getbootstrap.com/docs/5.0/utilities/text/#text-decoration
Please Login to comment...