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.
<!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:
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.
<!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>
Output:
