The Bootstrap NavBar has several available classes for optimizing text color, background color, and other properties. However, understanding when to use these classes and how to customize them can be challenging. In this tutorial we will create a NavBar with the following custom features:
- Background Color
- Text Color
- Hover Color
- SCSS Variables for Theming the NavBar
Here is the Bootstrap NavBar what we will build in this demo:

This demo uses the navbar-dark
, bg-dark
, navbar-nav
, and text-success
classes. Full code is in the Resources section.
In Bootstrap the NavBar component is designated with the navbar
class. Children elements are transformed into supporting NavBar subcomponents when they have classes like navbar-brand
or navbar-text
.
Here is the full list of Bootstrap 5 NavBar component classes.
By default, none of these classes provide a background color. Instead, we can use one of the Bootstrap background color classes. These classes follow “typical” web dev design patterns and have a primary, secondary, warning, success, and other classes.
For this demo, I added bg-dark
to the topmost navbar
component:

Notice that the bg-dark
class applies a background color using variables and tags. This means we can customize the bg-dark
class across the entire app if desired. I will show an example of changing the variables in a later section.
To achieve the inner whitesmoke
background, I customized the existing navbar-collapse
class:
.navbar-collapse {
background-color: whitesmoke;
}
This leaves existing navbar-collapse
class styling in place and adds a background color.
Finally, I added the bg-warning
class to the button element to add the orange background color. Without this, the button would not have a background color and would blend in with the rest of the NavBar.
Next, try customizing the Bootstrap Accordion background color.
The subcomponent classes in the NavBar often come with color styling. The first component inside my NavBar is the Brand component which is created with the navbar-brand
class:

Notice that it has a color that comes from the --bs-navbar-brand-color
. This is applied by the navbar-brand
class.
Additionally, I have the navbar-dark
class on the outermost NavBar element. If a specific subcomponent doesn’t get text color from it’s own class, it will receive it from the navbar-dark
class.
After the NavBar Brand component comes a wrapping NavBar Collapse component. This is created by adding navbar-collapse
to a div. It controls the collapse and expand styling for the elements it contains.
The NavBar collapse component does not have a default text color, so its components receive their color from navbar-dark
.

In the image above, you can see that the navbar-dark
color is set to a green color. That is a custom color I set through a variable. In the next section I’ll show how to customize these variables.
I used the rounded-start class to add the left border radius to the NavBar Collapse component.
We’ve seen in previous examples that Bootstrap NavBar classes often get their color values from Bootstrap variables. We can customize these variables and impact the behavior of all classes that use the variables.
Let’s drill down into how to find a variable to customize. I’ve stripped the custom values off of the variables. You can see that the default nav-link
class has a white text color obtained from --bs-nav-link-color
. Click on the tag value in Chrome dev tools.

Keep drilling into the tags for color until you get to the below navbar-dark
section. Then click the link to _navbar.scss:267.


This will take you to the names of the variables used for navbar-dark
. Once you have the variable names, you can customize the variables in your .scss file.
//CustomColorNavBar.scss
$navbar-dark-brand-color: rgba(140, 143, 143, 0.781);
$navbar-dark-color: #198754;
@import "bootstrap/scss/bootstrap";
Now your app will use these color values anywhere that the $navbar-dark-brand-color
and $navbar-dark-color
are used.
Many of the NavBar classes come with a hover color. Explore a component in dev tools to see if it has a hover color. In my tutorial I used nav-link
component which has a hover color built in:

I customized this value by adding $navbar-dark-hover-color: #5dd39c;
in my .scss
file. Like I explained in the previous section, I drilled into the tags and files in Chrome dev tools.
Changing variable colors provides two benefits:
- It consistently changes all classes using the variable so you write less code
- We don’t have to construct complex selectors to overcome default Bootstrap styling.
You can also customize NavBar dropdown hover color.
Resources
Check out this demo to see how to make the NavBar full height and have left-to-right open.
Here is the complete code for this demo. It is based on the demo in the Bootstrap docs under the “NavBar Supported Content” section.
//CustomColorNavBar.scss
$navbar-dark-brand-color: rgba(140, 143, 143, 0.781);
$navbar-dark-color: #198754;
$navbar-dark-hover-color: #5dd39c;
@import "bootstrap/scss/bootstrap";
.navbar {
padding: 2px 0px 2px 2px
}
.navbar-collapse {
background-color: whitesmoke;
}
//CustomColorNavBar.tsx
import React from "react";
import "./CustomColorNavBar.scss";
export default function CustomColorNavBar() {
const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
return (
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="#">Navbar</a>
<div className="navbar-collapse rounded-start" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto" style={{ padding: 2 }}>
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item dropdown">
<button onClick={() => setIsDropDownOpen(!isDropDownOpen)} className="nav-link dropdown-toggle bg-warning rounded" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div className={`${isDropDownOpen ? "show" : ""} dropdown-menu`} aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
);
}