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

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:

my custom button

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