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 Bootstrap 4? A simple code is here-

<div class="card" style="max-width: 320px;">
     <div class="card-header text-center"><h3>Navigation</h3></div>
          <div class="card-block">
               <ul class="nav navbar-nav" style="font-size: 1.50em;">
                   <li><a href="#" class="nav-link">Home</a></li>
                    <li><a href="#" class="nav-link">Documents</a></li>
                    <li><a href="#" class="nav-link">Videos</a></li>
                    <li><a href="#" class="nav-link">Gallery</a></li>
                    <li><a href="#" class="nav-link">Download</a></li>
                </ul>
           </div>                   
</div>

Answer 1

The CSS code of Bootstrap 4 is compiled with Sass (SCSS) instead of Less now. Bootstrap 4 ships with a grunt build chain. The "best" way to customize Bootstrap is using the default build chain.

1. download and unzip the source code
2. navigate to the bootstrap (bootstrap-4-dev) folder
3. run npm install in your console
4. run grunt dist to recompile your CSS code

To change the colors to can edit both scss/bootstrap.scss or scss/_variables.scss now. The examples below edit scss/bootstrap.scss, make sure you redeclare the variables at the begin of the scss/bootstrap.scss file.

The color of the .nav-link and nav-link:hover is set by the default colors for the a selectors, you can changes these colors in scss/bootstrap.scss as follows:

$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

// Core variables and mixins
@import "variables";
@import "mixins";
....

Notice that the above change the colors of all your links. To change the colors of only .nav .nav-link or even .card .nav .nav-link you will have to compile CSS code with a higher specificity. Do not use !important

Also notice that Bootstrap currently is in a alpha state, so you should not use it for production. Variables to declare the colors of the .nav-link do not exist yet, but possible do in future, see also: https://github.com/twbs/bootstrap/issues/18630

To change the color of the colors of all .nav .nav-links in your code use the follow SCSS code at the end of your scss/bootstrap.scss file:

....
// Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

To modify the colors of only the .nav-links inside the .cards you should create CSS code with a higher specificity as follows:

....
// Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

Of course you can also create your own CSS code at the end of the compiled bootstrap.css file. Depending of your needs use higher specificity;

Change all links:

a {color: #f00;}
a:hover {color: #0f0;}

HTML:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
  a {color: #f00;}
  a:hover {color: #0f0;}
</style> 

Or with higher specificity:

.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}

Or even:

.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}    

Answer 2

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

Answer 3

Two ways (which is actually one):

1. Adding your own styles

Actually bootstrap allows being overwritten in almost every case, therefore if you set something in your own .css it will overrule the style set in bootstrap.css

So adding this to your own .css:

.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}

You will see it works as a charm.

2. You can go and find everything set in bootstrap.css

I highly discourage you doing so unless it is really necessary, since every styling can be overwritten and it will create a cleaner structure for your styling.