BootstrapHow-ToBeginner · 3 min read

How to Use Text Decoration in Bootstrap: Simple Guide

In Bootstrap, you can use the text-decoration utility classes like text-decoration-none, text-decoration-underline, and text-decoration-line-through to control text decoration styles. Simply add these classes to your HTML elements to remove, add underline, or add a line-through decoration respectively.

📐

Syntax

Bootstrap provides three main classes to control text decoration:

text-decoration-none: Removes any text decoration.
text-decoration-underline: Adds an underline to the text.
text-decoration-line-through: Adds a line-through (strikethrough) to the text.

Apply these classes directly to any text element like <p>, <span>, or <a>.

html

<p class="text-decoration-none">No decoration text</p>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Line-through text</p>

Output

Three paragraphs: first with normal text, second underlined, third with line-through

💻

Example

This example shows how to use Bootstrap text decoration classes on different elements.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Text Decoration Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
  <h2 class="text-decoration-underline">Underlined Heading</h2>
  <p class="text-decoration-none">This paragraph has no text decoration.</p>
  <p class="text-decoration-line-through">This paragraph has a line-through decoration.</p>
  <a href="#" class="text-decoration-none">Link without underline</a><br>
  <a href="#" class="text-decoration-underline">Link with underline</a>
</body>
</html>

Output

A page with an underlined heading, one paragraph with no decoration, one with line-through, and two links—one without underline and one with underline.

⚠️

Common Pitfalls

Some common mistakes when using Bootstrap text decoration classes include:

Not including Bootstrap CSS, so classes have no effect.
Using conflicting CSS styles that override Bootstrap classes.
Expecting text decoration on elements that do not display text (like <div> without text).

Always check your HTML structure and CSS load order.

html

<!-- Wrong: Missing Bootstrap CSS -->
<p class="text-decoration-underline">This won't be underlined if Bootstrap CSS is missing.</p>

<!-- Right: Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Output

Without Bootstrap CSS, the underline won't appear; with it, the text is underlined.

📊

Quick Reference

Class	Effect
text-decoration-none	Removes all text decoration
text-decoration-underline	Adds underline to text
text-decoration-line-through	Adds line-through (strikethrough)

✅

Key Takeaways

Use Bootstrap classes like text-decoration-none, text-decoration-underline, and text-decoration-line-through to control text decoration easily.

Always include Bootstrap CSS for these classes to work.

Apply text decoration classes directly to text elements such as paragraphs, spans, or links.

Avoid conflicting CSS that may override Bootstrap's text decoration styles.

Refer to the quick reference table for the correct class names and their effects.