twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an <a>-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 bootstrap that avoids this behavior?

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

Tested CSS lines:

a:hover .btn-group { text-decoration: none } a .btn-group:hover { text-decoration: none } a:hover .btn-group .btn { text-decoration: none } a .btn-group .btn:hover { text-decoration: none } 

Any additional !important does not work, either (suggested by baptme).

Answer 1

Bootstrap 4+

This is now easy to do in Bootstrap 4+

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

Answer 2

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