Open In App

How to Change Navigation Bar Color in Bootstrap?

Last Updated : 06 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Changing the navigation bar color in Bootstrap means customizing the appearance of the navbar by modifying its background, text, or other styling elements.

Below are the approaches to change the color of the navigation bar in Bootstrap:

Using the inbuilt color classes

Changing the text color: The text color of the navigation bar can be changed using two inbuilt classes: 

ClassDescription
navbar-lightSets text color to dark. Used with a light background.
navbar-darkSets text color to light. Used with the dark background.

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:

ClassDescription
.bg-primarySets color to primary.
.bg-secondarySets color to secondary.
.bg-successSets color to success.
.bg-dangerSets color to danger.
.bg-warningSets color to warning.
.bg-infoSets color to info.
.bg-lightSets color to light.
.bg-darkSets color to dark.
.bg-whiteSets color to white.
.bg-transparentSets navbar to transparent.

Example: In this example we demonstrates how to change the navigation bar color in Bootstrap using different background color classes like bg-light, bg-warning, bg-dark, bg-primary, bg-secondary, and bg-success.

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>
</body>

</html>

Output: 

navigation-bar-color-in-Bootstrap

Changing navigation bar color in Bootstrap Example Output

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. 

CSS
/* 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.
 

CSS
 /* 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">
        <b>changing navigation bar
            color in Bootstrap </b>


        <p>The above navigation bar uses a
            custom class for changing the colors.
        </p>

    </div>
</body>

</html>

Output: 

changing-navigation-bar-color-in-Bootstrap



Next Article

Similar Reads