Change navbar text color Bootstrap

Question

I currently have this piece of html which represents the relevant part of my navbar:

    <         


        

Answer 1

The syntax is :

.nav navbar-nav .navbar-right > li > a {
   color: blue;
}

Answer 2

Thanks WChoward for your answer. I expanded:

.nav-link, .dropdown-item {
    color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
    color: darkgreen !important;
}

Answer 3

If you need to change the background colour of the navbar, you can do the following:

<nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">

And to change the text:

<a class="nav-link" href="#" style="color:#ccc">

Answer 4

The thread you linked to does answer the question for you. You need to target the a elements themselves. E.g.

.nav.navbar-nav.navbar-right a {
    color: blue;
}

If that doesn't work, it just needs to be more specific. E.g.

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

Answer 5

In fact, we can simply use the standard bootstrap text colors, instead of hacking the CSS formats.

Standard Color examples: text-primary, text-secondary, text-success, text-danger, text-warning, text-info

In the Navbar code sample bellow, the text Homepage would be in the orange color (text-warning).

<a class="navbar-brand text-warning" href="/" > Homepage </a>

In the Navbar menu item sample bellow, the text Menu Item would be in the blue color (text-primary).

<a class="dropdown-item text-primary" href="/my-link">Menu Item</a>

Answer 6

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

Worked for me. Bootstrap v4.3.1