How to display black navigation bar in Bootstrap ?

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.
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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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:
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property