How to display black navigation bar in Bootstrap ?
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:
