How to change navigation bar color in Bootstrap ? - GeeksforGeeks

03 Aug, 2021
The navigation bar color can be changed in Bootstrap using 2 methods:Method 1: Using the inbuilt color classesChanging the text colorThe text color of the navigation bar can be changed using two inbuilt classes:  
navbar-light: This class will set the color of the text to dark. This is used when using a light background color.
navbar-dark: This class will set the color of the text to light. This is used when using a dark background color.
Changing the background color:Bootstrap 4 has a few inbuilt classes for the colors of any background. These can be used to set the color of the background of the navigation bar. The various background classes available are: 
.bg-primary: This sets the color to the primary color.
.bg-secondary: This sets the color to the secondary color.
.bg-success: This sets the color to the success color.
.bg-danger: This sets the color to the danger color.
.bg-warning: This sets the color to the warning color.
.bg-info: This sets the color to the info color.
.bg-light: This sets the color to the light color.
.bg-dark: This sets the color to the dark color.
.bg-white: This sets the color to the white color.
.bg-transparent: This sets the navbar to be transparent.
Example:  
html
<!DOCTYPE html><html> <head>    <title>      How to change navigation bar color in Bootstrap ?  </title>     <!-- Include Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></head> <body>    <!-- Navbar text is dark and background is light -->    <nav class="navbar navbar-light bg-light">        <a class="navbar-brand" href="#">          Light color background      </a>    </nav>     <nav class="navbar navbar-light bg-warning">        <a class="navbar-brand" href="#">          Warning color background      </a>    </nav>     <!-- Navbar text is light and background is dark -->    <nav class="navbar navbar-dark bg-dark">        <a class="navbar-brand" href="#">          Dark color background      </a>    </nav>     <nav class="navbar navbar-dark bg-primary">        <a class="navbar-brand" href="#">          Primary color background      </a>    </nav>     <nav class="navbar navbar-dark bg-secondary">        <a class="navbar-brand" href="#">          Secondary color background      </a>    </nav>     <nav class="navbar navbar-dark bg-success">        <a class="navbar-brand" href="#">          Success color background      </a>    </nav>     <div class="container">        <h1 style="color: green">GeeksforGeeks</h1>        <b>          How to change navigation bar color in Bootstrap ?      </b>         <p>The above navigation bars use some of the          default color classes available in Bootstrap4.</p>     </div></body> </html>
Output:  
Method 2: Creating a custom class for the navigation barA custom class can be created to specify the background color and the text color of the navbar. This class is styled using CSS according to the required values. The names of the classes are kept in a manner to override the inbuilt navigation bar classes.The background color is set by directly specifying the background-color property with the color needed.  
html
/* Modify the background color */.navbar-custom {    background-color: lightgreen;}
The navbar text and the brand text color can be set using the .navbar-text and .navbar-brand classes. These are the inbuilt navigation bar classes that are be overridden by using the same class name. The text color is specified using the color property. 
html
/* Modify brand and text color */.navbar-custom .navbar-brand,.navbar-custom .navbar-text {    color: green;}
Example:  
html
<!DOCTYPE html><html> <head>    <title>      How to change navigation bar color in Bootstrap ?  </title>     <!-- Include Bootstrap CSS -->    <link rel="stylesheet"          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <style>        /* Modify the background color */                 .navbar-custom {            background-color: lightgreen;        }        /* Modify brand and text color */                 .navbar-custom .navbar-brand,        .navbar-custom .navbar-text {            color: green;        }    </style></head> <body>    <!-- Navbar text is dark and background is light -->    <nav class="navbar navbar-custom">        <a class="navbar-brand" href="#">          Custom color background navbar      </a>    </nav>     <div class="container">        <h1 style="color: green">GeeksforGeeks</h1>        <b>How to change navigation bar          color in Bootstrap ?</b>                <p>The above navigation bar uses a          custom class for changing the colors.</p>     </div></body> </html>
Output:  
 
sumitgumber28
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?