Creating a custom class for the navigation bar

Method 1: Using the inbuilt color classes

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:

How to change navigation bar color in Bootstrap ?

In Bootstrap, the navigation bar color refers to the background color of the navbar component. To change the navigation bar color in Bootstrap, use utility classes like bg-primary, and bg-secondary, or customize with CSS targeting the navbar element. It determines the background color, allowing for easy color customization.

The navigation bar color can be changed in Bootstrap using 2 methods:

Table of Content

Using the inbuilt color classes
Creating a custom class for the navigation bar

Tags:

#Bootstrap-4 #Bootstrap-Misc #Bootstrap #Web Technologies

Method 1: Using the inbuilt color classes

Creating a custom class for the navigation bar

How to change navigation bar color in Bootstrap ?

Similar Reads