The navigation bar color can be changed in Bootstrap using 2 methods:
Method 1: Using the inbuilt color classes
Changing the text color
The 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.
Method 2: Creating a custom class for the navigation bar
A 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.
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.
- How to use Top Navigation with Left Navigation Bar using Bootstrap ?
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- How to place content under fixed flexbox navigation bar ?
- How to create Vertical Navigation Bar using HTML and CSS ?
- New Google Site Navigation Bar
- How to change Hamburger Toggler color in Bootstrap ?
- How to change the “checked” background color of toggle switch in Bootstrap 4?
- How to force tab-navigation to stay in place using Bootstrap ?
- How to change an element color based on value of the color picker value using onclick?
- How to change an element color based on value of the color picker value on click?
- Difference between self::$bar and static::$bar in PHP
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- How to do box shadow with progress bar style using bootstrap?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.