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

Question

Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?

Is there a better way to add links to a btn-group in boo

Answer 1

{ 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
}

Answer 2

just use bootstrap class "btn" in the link it will remove underline on hover

Answer 3

Easy way to remove the underline from the anchor tag if you use bootstrap. for my case, I used to like this;

 <a href="#first1" class=" nav-link">
   <button type="button" class="btn btn-warning btn-lg btn-block">
   Reserve Table
   </button>
 </a>

Answer 4

a.btn {
  text-decoration: none;
}

Answer 5

The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.

a:hover, a:focus { text-decoration: none;}

Answer 6

Bootstrap 4+

This is now easy to do in Bootstrap 4+

<a href="#" class="text-decoration-none">
    <!-- That is all -->
</a>