bootstrap 4 remove underline when clicked

user_6545383 0
Viewed 8016

I have a problem removing underline that appears when clicking a menu in a navbar, this is the code that i use. but it is not working!

a.nav-link, a.nav-link:hover, a.nav-link:active, a.nav-link:visited, a.nav-link:focus {
    text-decoration:none;
}

stil no luck.

i'm using bootstrap 4 alpha

twitter-bootstrap css html
4 Answers

you can remove underline in all a tag 

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

In bootstrap 4 you can simply add

.text-decoration-none

class and your job is done.

user_27812380

Are you loading your css after bootstrap library?, for example:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">

In this case the css on style.css will prevail over bootstrap css

Let me know if that helps you!

user_54235130

Bootstrap 4 uses Sass for variables and mixins, the simplest way to override default behaviors of links is to define a custom class just like below:

.non-underline-link{
   text-decoration: none !important;
}

your html file:

<a href='/' class='non-underline-link'>
   <p>Hello!</p>
</a>

then recompile it in your project. for more information go HERE

user_77797860
Related