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    lt a href     gt       lt div class  btn-group  gt           lt button class  btn  gt Text lt  button gt           lt button class  btn  gt Text lt  button gt       lt  div gt   lt  a gt    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

User · Answer

a hover text-decoration  underline  important  a text-decoration  none  important

User · Answer

a hover     OPTIONAL   a visited  a focus  text-decoration  none  important

User · Answer

Bootstrap 4   This is now easy to do in Bootstrap 4    lt a href     class  text-decoration-none  gt       lt  -- That is all -- gt   lt  a gt

User · Answer

Buttons with the btn class do not have underlines unless you are doing something wrong  In this case nesting  lt button gt  inside of  lt a gt       Something that I think you might be trying to do  is to create a bootstrap button without any decorations  underline  outline  button borders  etc   In other words  if your anchor is not a hyperlink  it is semantically a button   Bootstrap s existing btn class appears to be the correct way to remove underline decorations from anchor buttons      Use the button classes on an  lt a gt    lt button gt   or  lt input gt  element   EDIT  Hitesh points out that btn will give you a shadow on  active  Thanks  I have modified my first example to use btn-link and incorporated the accepted answer s text-decoration  none to avoid this problem  Note that nesting a button inside of an anchor remains malformed html     a point which isn t addressed by any of the other answers    x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 5 css bootstrap css  rel  stylesheet   gt  x000D   lt div gt  x000D       lt  -- use anchors for borderless buttons -- gt  x000D       lt a href     class  btn btn-link  style  text-decoration  none  gt Text lt  a gt   x000D       lt a href     class  btn btn-link  style  text-decoration  none  gt Text lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Alternatively  for a regular button group using anchors    x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 5 css bootstrap css  rel  stylesheet   gt  x000D   lt div class  btn-group  gt  x000D       lt  -- use anchors for borderless buttons -- gt  x000D       lt a href     class  btn btn-default  gt Text lt  a gt   x000D       lt a href     class  btn btn-default  gt Text lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    In other words  it should not be necessary to introduce your own nounderline class and or custom styling as the other answers suggest  However  be aware of certain subtleties         According to the HTML5 spec   lt a gt  lt button gt    lt  button gt  lt  a gt  is illegal      Content model    Transparent  but there must be no interactive content descendant            Interactive content is content that is specifically intended for user interaction    a  audio  if the controls attribute is present   button  embed  iframe  img  if the usemap attribute is present   input  if the type attribute is not in the hidden state   keygen  label  object  if the usemap attribute is present   select  textarea  video  if the controls attribute is present       P S  If  conversely  you wanted a button that has underline decorations  you might have used btn-link  However  that should be rare - this is almost always just an anchor instead of a button

User · Answer

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

User · Answer

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 · Answer

a btn     text-decoration  none

User · Answer

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  lt a gt  tags    lt a href     class  nounderline  gt     lt div class  btn-group  gt       lt button class  btn  gt Text lt  button gt       lt button class  btn  gt Text lt  button gt     lt  div gt   lt  a gt    CSS    nounderline     text-decoration  none  important

User · Answer

Try putting anchor tag inside  and adding a display block      it will work fine

User · Answer

Why not just apply nav-link class    lt a href     class  nav-link  gt

User · Answer

If you are using Less or Sass with your project  you can define the link-hover-decoration variable  which is underline by default  and you re all set

User · Answer

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 · Answer

Easy way to  remove the underline from the anchor tag if you use bootstrap  for my case  I used to like this     lt a href   first1  class   nav-link  gt      lt button type  button  class  btn btn-warning btn-lg btn-block  gt     Reserve Table     lt  button gt    lt  a gt

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

Examples related to css

Examples related to twitter-bootstrap