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    lt nav class  navbar navbar-toggleable-md navbar-light bg-danger  gt           lt 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  gt           lt span class  navbar-toggler-icon  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  href     gt Jordan Baron lt  a gt        lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt           lt ul class  navbar-nav mr-auto  gt               lt li class  nav-item active  gt                   lt a class  nav-link  href     gt Home lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt

User · Answer

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

User · Answer

You can just use  quot  important quot  to get your custom color  navbar    background-color  yourcolor  important

User · Answer

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   Bootstrap 4 1    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  lt navbar class  bg-custom  gt   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 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

User · Answer

lt nav class  quot navbar navbar-toggleable-md navbar-light bg-danger quot  gt   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-   lt nav class  quot navbar navbar-toggleable-md navbar-light bg-color quot  style  quot background-color  cyan  quot  gt       That would do

User · Answer

If you read the bootstrap 4 documentation  Color schemes  it will answer your questions

User · Answer

I got it  This is very simple  Using the class bg you can achieve this easily   Let me show you    lt nav class  navbar navbar-expand-lg navbar-dark navbar-full bg-primary  gt  lt  nav gt    This gives you the default blue navbar  If you want to change your favorite color  then simply use the style tag within the nav    lt nav class  navbar navbar-expand-lg navbar-dark navbar-full  style  background-color   FF0000  gt

User · Answer

Update 2019 - Bootstrap v4 1   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   lt nav class  navbar navbar-dark bg-company-red  gt    CSS style      bg-company-red       background-color  darkred  important      See http   getbootstrap com docs 4 1 components navbar  color-schemes for official documentation

User · Answer

To change navbar background color    navbar-custom        background-color  yourcolor  important

[bootstrap-4] Bootstrap 4 navbar color

Examples related to bootstrap-4