a tag without line-decoration in Bootstrap 4

Question

I would like to have a link that looks just like plain text except for the cursor by using as few css as possible.

The problem: <a> has a blue color (that darkens when hovered) and also has underline on hover. I want it to look like plain text (black without underline).

By using the Bootstrap class "text-dark" I managed to get rid of the blue color. But how do I get rid of the underline (text-decoration) without writing css?

.no-underline:hover {
  text-decoration: none;
  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<span>Standard text</sapn>
<hr>
<a href="#">Standard a tag. Different colors and underline on hover</a>
<hr>
<a href="#" class="text-dark">a tag with text-dark class. Note underline on hover</a>
<hr>
<a href="#" class="text-dark no-underline">a tag with text-dark class and css to disable underline on hover</a>

Answer 1

Bootstrap 4 has the class "text-decoration-none"

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

https://getbootstrap.com/docs/4.3/utilities/text/#text-decoration

Answer 2

There are several Bootstrap 4 classes that set text-decoration: none. Without knowing the semantic context of the link, I suggest you use the .btn class...

<a href="#" class="text-dark btn">a tag with text-dark class and css to disable underline on hover</a>

https://www.codeply.com/go/CIt6zI0Iqw

However, there may be a class that works better semantically such as nav-link (inside nav), card-link (inside cards), or .breadcrumb-item. Also, note that Bootstrap 4 only applies the underline to anchor links with the href="" attribute. A simple anchor anchor will not have an underline on hover.