how do i change bootstrap nav-bar color?

Question

i want to change my bootstrap nav bar color. I used TWBSColor to make a custom color. This is what i want:

 .navbar-default { background-color: #ffd2d2; border-color: #000000; } .navbar-default .navbar-brand { color: #000000; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #000000; } .navbar-default .navbar-nav > li > a { color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-toggle { border-color: #000000; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000000; } .navbar-default .navbar-toggle .icon-bar { background-color: #000000; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #000000; } .navbar-default .navbar-link { color: #000000; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #000000; } } 

And this is what it is:

 html, body { height: 100%; } body { padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ } .img-portfolio { margin-bottom: 30px; } .img-hover:hover { opacity: 0.8; } /* Home Page Carousel */ header.carousel { height: 50%; } header.carousel .item, header.carousel .item.active, header.carousel .carousel-inner { height: 100%; } header.carousel .fill { width: 100%; height: 100%; background-position: center; background-size: cover; } /* 404 Page Styles */ .error-404 { font-size: 100px; } /* Pricing Page Styles */ .price { display: block; font-size: 50px; line-height: 50px; } .price sup { top: -20px; left: 2px; font-size: 20px; } .period { display: block; font-style: italic; } /* Footer Styles */ footer { margin: 50px 0; } /* Responsive Styles */ @media(max-width:991px) { .customer-img, .img-related { margin-bottom: 30px; } } @media(max-width:767px) { .img-portfolio { margin-bottom: 15px; } header.carousel .carousel { height: 70%; } } .navbar-default { background-color: #ffd2d2; border-color: #000000; } .navbar-default .navbar-brand { color: #000000; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #000000; } .navbar-default .navbar-nav > li > a { color: #000000; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #000000; } .navbar-default .navbar-toggle { border-color: #000000; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #000000; } .navbar-default .navbar-toggle .icon-bar { background-color: #000000; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #000000; } .navbar-default .navbar-link { color: #000000; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #000000; } } 

But i dont know how to add it ;( please help...

Answer 1

If all you want to do is just customize the navbar background color, the easiest way is just open the Bootstrap Customizer and change these two variables to suit your taste. The first one is for default and second is for inverse navbar variety.

@navbar-default-bg
@navbar-inverse-bg

Of course, whenever you upgrade to the next version of bootstrap, you have to remember this and make the proper variable change before downloading.

The second usual option is to install jekyll , node , grunt and other bootstrap dependencies and build bootstrap yourself by changing variables.less , but this method is an overkill if all you need is to customize background color. However, details about this second way is also provided in the Bootstrap Customizer page.