Bootstrap change 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>

i think you are missing `navbar-dark` as suggested in some answers. A quick code snippet at https://stackoverflow.com/a/47900899/2797254 — Weishi Z, Dec 20 '17 at 07:45

Carol Skelly · Answer 1 · 2021-04-08T14:00:03.610

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

Chad · Answer 2 · 2021-04-12T20:15:55.750

36

Update 2021 - Works for Bootstrap v5 & v4

Here's a much more simple way to change the navbar background color.

Just use .navbar-dark instead of .navbar-light and add your custom background color class like .bg-company-red

.navbar-dark will make all your links white.

HTML

<nav class="navbar navbar-dark bg-company-red">

CSS style...

.bg-company-red {
    background-color: darkred !important;
}

See the following documentation link for your version:

edited Apr 12 '21 at 20:15

answered Sep 27 '17 at 21:48

Chad

1,708
1
25
44

Hi! I'm using webpack for all my external css files. Once I try to override styles from Bootstrap 4 I must use `!important` rule, otherwise they are not applied. Does customization mechanism has changed in v4? With v3 I had no such problems – Kuzma Nov 09 '17 at 11:50
It's possible that you just need to be more specific in your CSS selector so that you don't need to use `!important`. So instead of `.special-class` try `body > header > .special-class`. Copy the selector that Bootstrap is using and then just make sure your override styles are included after the bootstrap styles. – Chad Nov 09 '17 at 16:58
1

Thanks for advice! I tried a lot of combinations, but only `important!` changes properties. Very weird situation... – Kuzma Nov 09 '17 at 17:49
Well, it was my fault: I had the `.bg-dark` class which already had `!important` rule. Removing it solved the problem – Kuzma Nov 10 '17 at 16:27
Using !important is a bad practice. More later or specific rule. – Ronny Sherer Nov 20 '19 at 14:17

score 9 · Answer 3 · edited Nov 06 '19 at 14:45

9

I got it. This is very simple. Using the class bg you can achieve this easily.

Let me show you:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

This gives you the default blue navbar

If you want to change your favorite color, then simply use the style tag within the nav:

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

edited Nov 06 '19 at 14:45

brooksrelyt

3,925
5
31
54

answered Nov 18 '17 at 03:12

INONAME

119
1
2

While this may technically work, it's not the way to do it in Bootstrap and causes accessibility issues. – Gisto May 08 '20 at 04:58

score 3 · Answer 4 · answered Dec 09 '18 at 20:05

3

you can write !important in front of background-color property value like this it will change the color of links.

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

answered Dec 09 '18 at 20:05

Hamza Arshad

41
1

1

This is not a good idea. Use of !important is not a good practice and unnecessary. – Carol Skelly Dec 11 '18 at 12:44

score 0 · Answer 5 · edited Nov 06 '19 at 14:43

0

To change navbar background color:

.navbar-custom {

    background-color: yourcolor !important;
}

edited Nov 06 '19 at 14:43

brooksrelyt

3,925
5
31
54

answered Nov 06 '19 at 05:30

Furqan Amin

55
5

score -1 · Answer 6 · answered Aug 10 '20 at 20:10

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">

So you have this code here, you must be knowing that bg-danger gives some sort of color. Now if you want to give some custom color to your page then simply change bg-danger to bg-color. Then either create a separate css-file or you can workout with style element in same tag . Just do this-

`<nav class="navbar navbar-toggleable-md navbar-light bg-color" style="background-color: cyan;">` .

That would do.

score -1 · Answer 7 · answered Feb 17 '21 at 10:45

-1

You can just use "!important" to get your custom color

.navbar {
 background-color: yourcolor !important;
 }

answered Feb 17 '21 at 10:45

confused_

1,133
8
10

Using !important is not a good practice when specificity can be used – Carol Skelly Apr 08 '21 at 13:41
Yes, you are correct we can add class to that element. – confused_ Apr 10 '21 at 11:02

Bootstrap change navbar color

7 Answers7

Linked

Related