How to change the navigation bar color in Bootstrap?There are two ways to change the navigation bar color in Bootstrap: Method1:As we know that we have inbuilt classes in the Bootstrap where each class is defined in the documentation. So, we can change any text color by changing the class name to the appropriate color class name. For Example: - .navbar-light: This class is used to change the color of the text to dark. So, the navbar background will be lighter, and the text will be darker.
- .navbar-dark: This class is used to change the text color from dark to light. So, the background color of the navbar will be darker, and the text color will be lighter.
- .bg-primary: This class is used to change the color of the text to primary colors.
- .bg-secondary: This class is used to change the color of the text to secondary colors.
- .bg-danger: This class is used to change the color of the text to the danger color.
- .bg-warning: This class is used to change the color of the text to the warning color.
- .bg-info: This class is used to change the color of the text to the info color.
- .bg-success: This class is used to change the color of the text to the success color.
- .bg-dark: This class is used to change the color of the text to dark color.
- .bg-light: This class is used to change the color of the text to a light color.
- .bg-transparent: This class is used to change the color of the navbar to transparent color.
- .bg-white: This class is used to change the color of the text to white color.
Example 1:Output: Explanation In the above article, we have taken different bars and set the different colors by changing their class names. For each nav bar, we have defined inbuilt class names, which will set their colors accordingly. Method 2:We can manually style the navigation bar using the background color property of CSS. Example 1:Output: Explanation: In the above code, we have created a navbar using nav tag and given it a class name. Then, in the style tag, we have defined its background color and text color and changed it successfully.
|