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

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:

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