How can I change link color and hover color in Bootstrap version 4?

Question

In my design, I want to change my link and hover color in a specific part. I try my best but I can\'t do that. I am new in bootstrap. How can I change it for Bootstr

Answer 1

2020 - Google brought me here for something similar.

Bootstrap 4.5

For those who would like to change only the link color or the < a > tag upon hover, just apply a custom class, say hover_black as follows;

Note - my links are white but black when hovered upon

//CSS

.text_white          { color: white;  } 
a.hover_black:hover  { color: black !important;  } 

// HTML
<a class="text_white hover_black"> Link </a>

Answer 2

Add this to your CSS:

a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important

Don't include the important tags at first though, see if there are any conflicts before adding them in. I personally prefer to just do a search & find of the relevant classes and parent divs to clear any conflicts or change the class name I'm using.

Answer 3

You can override the bootstrap classes by adding a custom css file like mystyle.css and place it just after bootstrap in the head section:

<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"  rel="stylesheet">     
<link rel="stylesheet"  href="path/mystyle.css" type="text/css"/>

and inside mystyle.css:

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}