Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to display black navigation bar in Bootstrap ?

  • Last Updated : 24 Aug, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :