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>
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-link
s 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;}
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
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.
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>
I found this link to be useful for my needs.
Bootstrap 4 Colors
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.