Skip to content
Related Articles

Related Articles

How to display black navigation bar in Bootstrap ?

Improve Article
Save Article
  • Last Updated : 24 Aug, 2021
Improve Article
Save Article

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. There are two following ways to display a black navigation bar.

Using .navbar-dark and .bg-dark classes: The .navbar-dark class of bootstrap makes the text in the navbar white and the .bg-dark class makes the background color of the navbar class black.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
  
    <link
      rel="stylesheet"
      href=
  
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Geeksforgeeks</a>
  
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Course</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Job Portal</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="search"
            placeholder="Search"
            aria-label="Search"/>
          <button class="btn btn-light my-2 my-sm-0"
                  type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
  </body>
</html>

Output:

Output

 

Setting background color using style property:  We can set the background color of the navbar by using the style property of the <nav>tag.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  
    <link
      rel="stylesheet"
      href=
  
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <nav
      class="navbar navbar-expand-lg navbar-dark"
      style="background-color: black"
    >
      <a class="navbar-brand" href="#">Geeksforgeeks</a>
  
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Course</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Job Portal</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="search"
            placeholder="Search"
            aria-label="Search"/>
          <button class="btn btn-light my-2 my-sm-0" 
                  type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
  </body>
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!