How do i change the Navigation bar color with bootstrap5

Published October 20, 2021

In this bootstrap5 example we will learn how to change the color of navigation bar. There are two ways to change the color of navigation bar with bootstrap5

Using inbuilt bootstrap properties
Using Custom class with CSS

Let's get started

Using inbuilt bootstrap properties

To change the text color we have two properties

navbar-light: This class property will set the color of the text to dark. This is used when using a light background color.
navbar-dark: This class property will set the color of the text to light. This is used when using a dark background color

Change the background color

Bootstrap5 has builtin color properties to set the background colors for any component. With these properties we can change the navigation bar background color.

.bg-primary: This property sets the color to the primary color.
.bg-secondary: This property sets the color to the secondary color.
.bg-success: This property sets the color to the success color.
.bg-danger: This property sets the color to the danger color.
.bg-warning: This property sets the color to the warning color.
.bg-info: This property sets the color to the info color.
.bg-light: This property sets the color to the light color.
.bg-dark: This property sets the color to the dark color.
.bg-white: This property sets the color to the white color.
.bg-transparent: This property sets the navbar to be transparent

Example code to set the Navigation Bar background color with bootstrap5

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Change Navigationbar color</title>
   </head>
   
   <body style="padding:10px;">

    <!-- 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">Bootstrap5</h1>
        <b>
          How to change navigation bar color in Bootstrap ?
      </b>

<p>The above color properties are available in bootstrap5
          </p>

    </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

How do i change the background color of the Navigation bar with bootstrap5

Using Custom Class with CSS Properties

We can change the background color and text color by create different custom class and apply css color properties on that class.

Let's create Custom CSS properties

 <style>
    /* Modify the background color */

    .navbar-custom {
        background-color: red;
    }
    /* Modify brand and text color */

    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: white;
    }
</style>

Complete code to change the Navigation bar background color

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Change Navigationbar color</title>
        <style>
        /* Modify the background color */

        .navbar-custom {
            background-color: red;
        }
        /* Modify brand and text color */

        .navbar-custom .navbar-brand,
        .navbar-custom .navbar-text {
            color: white;
        }
    </style>
   </head>
   
   <body style="padding:10px;">


   <!-- 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">Navigation Bar color</h1>
        <b>How to change navigation bar
          color in Bootstrap with custom CSS color properties?</b>


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

    </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

Article Contributed By :

1064 Views

Projects By category