askvity

How to Remove the Underline from a Link in CSS Bootstrap?

Published in Bootstrap CSS Styling 3 mins read

To remove the underline from a link in CSS Bootstrap, you can use the .text-decoration-none utility class provided by Bootstrap.

Removing the default underline from hyperlinks is a common styling task in web design, often done to achieve a cleaner look or when the design relies on other visual cues (like buttons) to indicate interactivity. When working with the Bootstrap framework, the easiest and recommended way to strip the underline from a link is by leveraging its built-in utility classes.

As stated in Bootstrap guidelines, to make a link not underlined using CSS classes with Bootstrap, you can add the .text-decoration-none class to the anchor tag. This will remove the default underline style from the link. Incorporating this within your Bootstrap HTML code should not be difficult.

Using the .text-decoration-none Class

This is the most straightforward method in Bootstrap 4 and later versions. You simply add the specified class directly to your <a> (anchor) tag.

Example:

Here’s how you apply the class:

<a href="#" class="text-decoration-none">This link will not be underlined.</a>

Compared to a standard Bootstrap link:

<a href="#">This link has a default underline.</a>

Using .text-decoration-none overrides the default text-decoration: underline; style applied to links.

When to Use This Method

  • When you want to quickly remove the underline for a specific link or a few links.
  • When you want to maintain a consistent style across your Bootstrap project using utility classes.
  • When you need to remove the underline globally or for certain types of elements, but prefer not to write custom CSS rules if a utility class exists.

Summary of Approach

Method Description Use Case
.text-decoration-none Bootstrap utility class added to <a> tag. Quick, specific links.

Alternative Methods (Custom CSS)

While .text-decoration-none is the Bootstrap-native way, you can also remove link underlines using standard CSS:

  • Targeting specific links:
    .my-no-underline-link {
  text-decoration: none;
}

    Then apply .my-no-underline-link to your <a> tag.

  • Targeting all links:
    a {
  text-decoration: none;
}

    Caution: This will remove underlines from ALL links on your page, including potentially those within navigation or other components where an underline might be expected. Use this with care or scope it more specifically.

For most cases within a Bootstrap project, using the .text-decoration-none class is the cleanest and most maintainable solution.

Related Articles