Bootstrap 4 navbar color

Question

In Bootstrap 4, how do I go about changing the background color of a navbar? The code from twbscolor doesn't work. I want to make the background color a different color and the font color white.

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>     </button>     <a class="navbar-brand" href="#">Jordan Baron</a>      <div class="collapse navbar-collapse" id="navbarSupportedContent">         <ul class="navbar-nav mr-auto">             <li class="nav-item active">             <a class="nav-link" href="#">Home</a>             </li>         </ul>     </div> </nav> 

Answer 1

Bootstrap 5 (update 2021)

In terms of style, the Navbar hasn't changed a lot in Bootstrap 5. Therefore, changing/overriding the colors & styles is similar to Bootstrap 4. To customize the supported Navbar content styles...

/* change the background color */ .navbar-custom {     background-color: #4433cc; }  /* change the brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text {     color: #ffcc00; }  /* change the link color */ .navbar-custom .navbar-nav .nav-link {     color: #ffbb00; }  /* change the color of active or hovered links */ .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom .nav-item:hover .nav-link {     color: pink; } 

If there are Navbar dropdowns you want to customize...

/* for dropdowns only */ .navbar-custom .navbar-nav .dropdown-menu {     background-color: #ddaa11; }  /* dropdown item text color */ .navbar-custom .navbar-nav .dropdown-item {     color: #000000; }  /* dropdown item hover or focus */ .navbar-custom .navbar-nav .dropdown-item:hover, .navbar-custom .navbar-nav .dropdown-item:focus {     color: #eeeeee;     background-color: red; } 

---

Bootstrap 4.x (update 2019)

Remember that whatever CSS overrides you define must be the same CSS specificity or greater in order to properly override Bootstrap's CSS.

The Navbar is transparent by default. If you only want to change the background color, it can be done simply by applying the color to the <navbar class="bg-custom">, but remember that won't change the other colors such as the links, hover and dropdown menu colors.

Here's CSS that will change any relevant Navbar colors in Bootstrap 4...

/* change the background color */ .navbar-custom {     background-color: #ff5500; } /* change the brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text {     color: rgba(255,255,255,.8); } /* change the link color */ .navbar-custom .navbar-nav .nav-link {     color: rgba(255,255,255,.5); } /* change the color of active or hovered links */ .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom .nav-item:hover .nav-link {     color: #ffffff; } 

Demo: http://www.codeply.com/go/U9I2byZ3tS

---

Override Navbar Light or Dark

If you're using the Bootstrap 4 Navbar navbar-light or navbar-dark classes, then use this in the overrides. For example, changing the Navbar link colors...

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

---

When making any Bootstrap customizations, you need to understand CSS Specificity. Overrides in your custom CSS need to use selectors that are as specific as the bootstrap.css. Read more

---

Transparent Navbar

Notice that the Bootstrap 4 (and 5) Navbar is transparent by default. Use navbar-dark for dark/bold background colors, and use navbar-light if the navbar is a lighter color. This will effect the color of the text and color of the toggler icon as explained here.

Related: https://stackoverflow.com/a/18530995/171456