CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jmv
jmv

Reputation: 415

bootstrap 4 remove underline when clicked

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

Upvotes: 3

Views: 9119

Answers (4)

Vikram Sharma
Vikram Sharma

Reputation: 526

In bootstrap 4 you can simply add

.text-decoration-none

class and your job is done.

Upvotes: 4

Shahin Ghasemi
Shahin Ghasemi

Reputation: 1759

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

Upvotes: 0

Vahid Alvandi
Vahid Alvandi

Reputation: 612

you can remove underline in all a tag 

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

Upvotes: 6

Jos&#233; Lopez Coronado
Jos&#233; Lopez Coronado

Reputation: 338

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!

Upvotes: 0

Related Questions