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

user_1535093 0
Viewed 188552

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).

twitter-bootstrap css
15 Answers

Bootstrap 4+

This is now easy to do in Bootstrap 4+

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

Why not just apply nav-link class?

<a href="#" class="nav-link">
user_21387520

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;}
user_42767100

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>
user_125960380

.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.

user_60242940

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

user_54753380

add the Bootstrap class 'text-decoration-none'to your anchor tags

`<a href="#" class="***text-decoration-none***">
    <div class="btn-group">
        <button class="btn">Text</button>
        <button class="btn">Text</button>
    </div>
</a>`
user_154445680

Add this css code to your css file:

a.btn { text-decoration: none !important; }

Use the a tag:

<a href="account/login" class="btn btn-outline-success mx-2">Login</a>

enter image description here

user_98754860
Related