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>

For future readers using Bootstrap 4.1+ https://stackoverflow.com/questions/43381596/bootstrap-4-navbar-color — Carol Skelly, Sep 20 '18 at 18:27

score 42 · Answer 1 · answered Jan 03 '16 at 10:11

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.

download and unzip the source code
navigate to the bootstrap (bootstrap-4-dev) folder
run npm install in your console
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;}

at last, someone oldschool style :) – cybernet2u May 23 '19 at 13:02 — cybernet2u, May 23 '19 at 13:02

score 15 · Answer 2 · answered Jun 14 '19 at 09:19

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

score 5 · Answer 3 · answered Jan 03 '16 at 04:37

5

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.

answered Jan 03 '16 at 04:37

Andrew Adam

1,572
9
22

1

your "go and find..." method is never needed – Bass Jobsen Jan 03 '16 at 10:15
@BassJobsen Yes I highly agree that this is never needed, that's why I said everything can be done the other way although just out of curiosity is there any reason besides the sake of a clean and nice code not to do it in your opinion? – Andrew Adam Jan 04 '16 at 17:29
cause you can not update bootstrap after your changes – Bass Jobsen Jan 06 '16 at 23:33

MarcoZen · Answer 4 · 2020-10-07T18:55:17.287

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>

klewis · Answer 5 · 2019-02-19T18:00:02.360

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

score 1 · Answer 6 · answered Jan 03 '16 at 04:37

1

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.

answered Jan 03 '16 at 04:37

Joel

458
3
14

but hover color not change – Fahim Foysal Kamal Jan 03 '16 at 04:48
The hover color is correctly specified in my example. The **color:** tag affects the text only, and the **:hover** path is aptly titled because it only engages those CSS properties when the mouse is over the link. – Joel Jan 03 '16 at 04:51
I don't know if I understood your question there, so I'll just say - if you put in the code that I gave you there and you did not see an effect, you will need to find out which element in the hierarchy is creating a conflict by having precedence over the child elements. .card // .card-block // .card-block ul // .card-block ul li // .card-block ul li a // .card-block ul li a.nav-link // Check your CSS files and see if any of these elements are called – Joel Jan 03 '16 at 04:55
When working with a large CSS file where you have trouble finding conflicts like this, a good idea is to make a test code for all of the parent elements above the target child and specify each one with a different :hover color in the CSS. Mark them !important and see which color shows up when you test it. Then you'll know exactly which element has the conflict. – Joel Jan 03 '16 at 05:01
but here, hover not working in my code. I follow your all suggestion. – Fahim Foysal Kamal Jan 03 '16 at 05:20
The reason it's not working is because there's a conflicting code, I've given some suggestions to find the source. If you want me to just do it for you, go to codepen.io and place your entire website code unedited. Send me the link. – Joel Jan 03 '16 at 05:36
do not use `!important` in this situation, see also https://css-tricks.com/when-using-important-is-the-right-choice/ – Bass Jobsen Jan 03 '16 at 10:14
There is an answer above which explains how to go from SCSS to CSS on the Bootstrap 4 build - follow those instructions and then retry the solutions suggested here. I didn't see the bs4 part before, so that's my mistake. – Joel Jan 03 '16 at 13:17

score 0 · Answer 7 · answered Mar 18 '18 at 21:08

0

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>

answered Mar 18 '18 at 21:08

Dr. Jon Paarlberg

1
2

1

This is true as default, but I think the question is more about changing the color to those he specifically wants, most likely to match his website theme. – Mannyfatboy Feb 26 '20 at 05:46

score 0 · Answer 8 · answered Oct 11 '19 at 22:39

0

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

answered Oct 11 '19 at 22:39

Doberon

611
9
19

This will change the link color but not on hover. .nav-link.active will change the color only for the active/current link https://www.w3schools.com/bootstrap4/bootstrap_navs.asp – Mannyfatboy Feb 26 '20 at 05:50

score 0 · Answer 9 · answered Jan 07 '21 at 20:40

0

If you just want to make the hover color the same as the non-hover state, use this variable:

$emphasized-link-hover-darken-percentage: 0;

answered Jan 07 '21 at 20:40

kjdion84

9,552
8
60
87

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

9 Answers9

Linked