I need the text color of the right section of my nav-bar turn white, using Bootstrap

Question

I need the text color of my nav-bar (white), while the background stays primary-subtle, using Bootstrap! When combine, how can I override the build in functions of Bootstrap using CSS.

Details of code

<nav class="navbar navbar-expand-lg bg-primary-subtle" data-bs-theme="dark">
<a class="navbar-brand" href=""> CONNECT </a>
<ul class="nav  ms-auto" >
    <li class="nav-item"><a class="nav-link active:text-decoration:none"  href="">Home</a></li>
    <li class="nav-item"><a class="nav-link active:text-decoration:none"  href="">Signup</a></li>
    <li class="nav-item"><a class="nav-link active:text-decoration:none"  href="">Reviews</a></li>
    <li class="nav-item"><a class="nav-link active:text-decoration:none"  href="">Login</a></li>
</ul>

I expect a back-ground color of primary-subtle (I have) and a white text color for my navbar -> Home, Sign up, Reviews and Login (There is no white text color)

Answer 1

You can override bootstrap css by adding !important to your own css:

a {
  color: white !important;
}

.nav-link {
    color: white !important;
}

.white-text {
    color: white !important;
 }

<li class="nav-item"><a class="nav-link active:text-decoration:none white-text"  href="">Home</a></li>

You can put it on an element, change the nav-link class or even create a new class if you don't want it on all the a elements.

Or you can use link light class from bootstrap

<li class="nav-item"><a class="nav-link active:text-decoration:none link-light"  href="">Home</a></li>