How to override CSS styles of Bootstrap for ".navlink"?-CodePudding

I'm not able to change the color of the ".navlink" to white in my html file. Please help me to change the color of the ".navlink" to white.

<section id="navbar-section">
   <nav  >
       <a href="#" >tent workshop</a>
       <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span ></span>
       </button>
       <div  id="navbarSupportedContent">
           <ul >
               <li  >
                   <a href="#"  aria-current="page">Home</a>
               </li>
               <li  >
                   <a href="#"  aria-current="page">Contact</a>
               </li>
               <li  >
                   <a href="#"  aria-current="page">Products</a>
               </li>
           </ul>
       </div>

   </nav>
</section>

CodePudding user response：

You should always use the selectors that Bootstrap uses to be able to override the color defined by bootstrap. Also, your CSS must be included after Bootstrap.

.navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
  color: #ffffff;
}

OR you override the CSS from Bootstrap by using "!important"

.nav-link {
  color: #ffffff!important;
}

.nav-link:focus, 
.nav-link:hover {
  color: #ffffff!important;
}

CodePudding user response：

would you try this?

<a href="#"  style="color:white;" aria-current="page">Home</a>

style="color:white;" it usually works

CodePudding user response：

<nav  >

Try this . It will make your navigation bar background color to white