Twitter-Bootstrap: How to Get Rid of Underlined Button Text When Hovering Over a Btn-Group Within an <A>-Tag

twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an a -tag?

{ text-decoration: none !important}

---

EDIT 1:

For you example only a{text-decoration: none} will works

You can use a class not to interfere with the default behaviour of <a> tags.

<a href="#" class="nounderline">
  <div class="btn-group">
    <button class="btn">Text</button>
    <button class="btn">Text</button>
  </div>
</a>

CSS:

.nounderline {
  text-decoration: none !important
}

I want to remove Underline in Bootstrap Link

.links {
  text-decoration: none;
}

<Link className={`links`} to={`/panelmember/${item._id}`}>
  <Card.Title as="h2">
    <strong>{item.name}</strong>
  </Card.Title>
</Link>

Bootstrap 5 underline default changed?

Yes, As of Bootstrap 5 alpha1 the migration docs state:

"Links are underlined by default (not just on hover), unless they’re part of specific components"

You could create a special class like this:

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

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

<a href="#" class="text-underline-hover">Link</a>

Demo

Or, if you want it to apply to all anchors except for those that contain a class= attribute use:

a:not([class]) {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

This will not effect btn, only links without class will underline on hover.

a tag without line-decoration in Bootstrap 4

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.

---

Related Topics