How to Change Link Color and Hover Color in Bootstrap Version 4

Bootstrap 4 Change nav link hover color

$link-color and $link-hover-color affect links on the page, but not Navbar nav-links, which are specifically set via $navbar-light-color and/or $navbar-dark-color variables. These are defined using lightness/darkness of $black or $white as you can see in variables.scss.

Therefore, assuming you'd want blue (darker) links on a lighter background, you'd probably want to set the Navbar nav-link color as...

$navbar-light-color: rgba($primary, .5);
$navbar-light-hover-color: rgba($primary, .7);
$navbar-light-active-color: rgba($primary, .9);

Demo: https://www.codeply.com/go/66E7nUGVxD

The above is for SASS. You can still customize the Navbar with CSS only: Bootstrap 4 navbar color

How to change link color (Bootstrap)

ul.nav li a, ul.nav li a:visited {
    color: #anycolor !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #anycolor !important;
}

ul.nav li.active a {
    color: #anycolor !important;
}

Change the styles as you wish.

How do I replace card links color in Bootstrap 4?

This is a textbook case for a custom class. You'd put it on the card you want to customize and write CSS accordingly. Or, use Bootstrap's text color utilities to directly style your links with theme colors, which adds hover color shift automatically. I'll demonstrate both approaches here.

.card.orangy a {
  color: orange;
}

.card.orangy a:hover,
.card.orangy a:active {
  color: darkorange;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Common card with no link styles</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card orangy py-2 card-container"> <!--------------- HERE -->
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with custom class</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#" class="text-danger"> <!-------------------------- HERE -->
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with a text color class</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

changing color of bootstrap navbar links on hover

.services-link strong:hover {  color: green;}

<!doctype html><html>
<head>  <title>Contact Us</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  <link href="contact.css" type="text/css"></head>
<body>  <div class="container-fullwidth">    <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">      <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">                    <span class="navbar-toggler-icon"></span>                </button>      <div class="collapse navbar-collapse" id="NewMenu">        <div class="navbar-nav">          <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>          <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>          <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>        </div>      </div>    </nav>  </div></body>
</html>

Change Bootstrap navbar color when hover

The colors of the links are overridden by the a tags' default styles, so you should apply it to the a tag, not the li tag:

nav ul li:hover a {
    color: red;
}

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li class="your_account"><a href="#">Your Account</a></li>
    </ul>
</nav>