How to Remove Underline from Links in Bootstrap.

How to Remove Underline from Links in Bootstrap.

📋 Table Of Content

In this article, we will learn how to remove the underline from anchor tags in bootstrap.

Just like any other HTML element, links can also be styled using CSS. We can change it color and size and even its text decoration.

A link in HTML generally means hyperlinks which is created using the <a> tag. It helps us to navigate through pages.

The <a> tag has four different pseudo-classes

  1. a:link
  2. a:visited
  3. a:hover, and
  4. a:active

Now, by default, the underline will appear beneath all of the links and their pseudo-classes too.

To remove this underline from the link, we can just change the text-decoration property of the <a> tag in our CSS.

a{
    text-decoration: none;
}

If you want to remove the underline from pseudo-classes too, then

a:link, a:visited, a:hover, a:active{
    text-decoration: none;
}

Now, this CSS property will remove the underline from links on your web page.

In bootstrap, we can remove the underline from the links in two ways:

  1. Using CSS text-decoration property, and
  2. Using the bootstrap class : .text-decoration-none

In bootstrap, by default, links don't show underline beneath it, even when you visit the link.

The underline is only visible when you hover over it or it's in active state, meaning when you move your cursor over it and click the link.

To remove the underline from links in bootstrap using css we have to:

  1. For normal or unvisited links, set a:link{text-decoration:none} .
  2. For visited links, set a:visited{text-decoration:none}
  3. For hover links, set a:hover{text-decoration:none}
  4. For active links, set a:active{text-decoration:none}

You can all in one line too, for example:

a:hover, a:active, a:visited, a:link{
    text-decoration: none;
}

Another way is to use the bootstrap class text-decoration-none. It is a very easy way to remove the underline from the hyperlinks. Just add the class to the <a> tag.

<a class="text-decoration-none" href="#">
    No underline link
</a>

Now the link will not show any underline beneath it.

Conclusion:

If you want to remove the underline from all the links on your website, it's better to go with the CSS styling way. The Bootstrap class method is good if you have some particular links where you don't want the underline.