Bootstrap 4 now uses Sass (SCSS) for its CSS code compilation instead of Less. It comes with a grunt build chain for easier customization. The recommended way to customize Bootstrap is by using the default build chain.

1. Start by downloading and unzipping the source code.
2. Go to the bootstrap (bootstrap-4-dev) folder.
3. Run npm install in your console.
4. Execute grunt dist to recompile the CSS code.

To change colors, you can now edit either scss/bootstrap.scss or

scss/_variables.scss</code. When editing <code>scss/bootstrap.scss

, ensure to redefine the variables at the beginning of the file.

You can adjust the colors of .nav-link and nav-link:hover by changing the default color values for the a selectors in scss/bootstrap.scss:

$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

// Import core variables and mixins
@import "variables";
@import "mixins";
....

Keep in mind that the above changes will affect all links. To modify colors for specific elements like .nav .nav-link or .card .nav .nav-link, you'll need to compile CSS code with higher specificity. Avoid using !important declarations.

Note that Bootstrap is currently in an alpha state, so it's not recommended for production use. The variables to define colors for .nav-link may be introduced in future updates. Check https://github.com/twbs/bootstrap/issues/18630 for updates.

To customize the colors of all .nav .nav-links, add the following SCSS code at the end of scss/bootstrap.scss:

....
// Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

For adjusting the colors of .nav-links within .cards, create CSS code with higher specificity like this:

....
// Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}  

You can also add your custom CSS code at the end of the compiled bootstrap.css file to suit your requirements. Use higher specificity as needed.

To change colors for 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> 

For higher specificity:

.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}

Or specifically for .card .nav-link:

.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}    

To customize the appearance of bootstrap classes, create a custom CSS file such as mystyle.css and include it right after the 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"/>

In the mystyle.css file, you can modify the styles as needed:

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}

One possible method to customize Bootstrap styles is by:

1. Implementing your own CSS modifications

Bootstrap's styles can be easily overridden by creating your own .css file with specific styles. For example, you can customize the navbar links by adding the following code to your CSS:

.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}

By doing this, you can achieve the desired look and feel for your website.

2. Analyzing and modifying Bootstrap's default styles

While it is possible to directly modify Bootstrap's CSS, it is not recommended unless absolutely necessary. It is more beneficial to create custom styles that overwrite Bootstrap's defaults for a more organized and maintainable codebase.

If you want to change just the color of a link or the < a > tag on hover, you can do so by adding a custom class like hover_black:

My links are normally white but turn black when hovered over

//CSS

.text_white          { color: white;  } 
a.hover_black:hover  { color: black !important;  } 

// HTML
<a class="text_white hover_black"> Link </a>

I am looking to make some specific changes to the link and hover color in my design.

I have a solution that can address all 3 changes using BS4 with sass in one go. If you have access to the .scss file in your custom project and can compile it, here is the recommended approach...

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

@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 attributes like text size, alignment, etc.*/
    text-transform:none; /*customize other attributes like text size, alignment, etc.*/
    text-decoration:none; /*customize other attributes like text size, alignment, etc.*/
    text-align:$txtalign; /*reference parameter values*/
}

Assuming you already have assigned hex colors to sass variables like this:

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

If so, you can call your mixin from any specific location in your sass file. Make sure to properly define your colors to create 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');
   }

When creating buttons or anchor links, you can include the following in your element structures:

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

By following these 4 simple steps, you can take complete control over your link and hover colors. Feel free to reuse or create as many variants as needed.

I hope this solution works for you.

Copy and paste the following into your stylesheet:

.nav-link {color:#FFFFFF;}
.nav-link:hover {color:#F00F00; text-decoration:none;}

Before using the !important tags, check for any conflicts. It's recommended to search for relevant classes and parent divs to avoid conflicts or rename the class if needed.

As a beginner, I discovered that Bootstrap 4 offers a handy class known as "nav-link" which can be used in the link element tag. While working on a dark, primary colored navbar, I noticed that the links were blending in with the background. Luckily, using this class solved the issue for me.

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

These CSS styles are perfect for my needs

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

For those seeking to maintain the hover color identical to the non-hover state, simply utilize the following variable:

$matching-hover-darken-percentage: 0;