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.

Answer 4

In my design, I want to change my link and hover color in a specific part.

You are describing 3 things that can be tackled all at once within BS4 with sass. If you have access to the .scss file of your custom project and able to compile it, then I would recommend the following approach...

For this particular case, you can create a custom mixin like so:

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}

I am assuming your have hex colors assigned to sass variables already like this:

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

If so, call your mixin from any specific location in your sass file. Sense this is your first time, notice how the following parameter $m-color-white represents the value for $bgcolorOff parameter above. So pay close attention to where you put your colors to help define your custom variant.

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }

Finally, when you create your buttons, or anchor links, you can add the following to your element structures:

<a class="btn btn-sm m-3 m-variant ">my custom button</a>

4 easy steps. After you do this the first time, every other time is easy. By taking this approach, you take full control of your link and hover colors. Re-use and/or create as many variants as you like.

Hope this helps

Answer 5

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 6

I'm just a noob, but Bootstrap 4 has a class called "nav-link" that you use in the link element tag. I was using a dark, primary colored navbar and the links were the same color. This solved it for me.

<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>

Answer 7

I found this link to be useful for my needs.

Bootstrap 4 Colors

Answer 8

these CSS work for me

.nav-pills .nav-link {
    color: #fff;
    cursor: default;
    background-color: #868686;
}

.nav-pills .nav-link.active {
    color: #000;
    cursor: default;
    background-color: #afafaf; 
    font-weight: bold;
}