How to Remove Underline from Links in Bootstrap.

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 its color and size and even its text decoration.

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

The anchor <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 anchor links and their pseudo-classes too.

Remove underline from links using CSS

To remove this underline from the anchor 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.

Remove Underline from links in bootstrap

In Bootstrap, we can remove the anchor tag underline 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.

If you are usign bootstrap 5, the above solution should work there too.

Conclusion:

If you want to remove the underline from all the anchor links on your website, it’s better to go with the CSS styling way.

The bootstrap “text-decoration-none” class is helpful when you want to remove the anchor tag underline only from some particular links. It won’t effect other anchor links on the page.