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.
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:
Please Login to comment...