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: IN this example, we will use the .navbar-dark class of Bootstrap.
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 = "#" >w3wiki</ 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 > </ html > |
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: In this example, we will set the background color using the style property.
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 = "#" > w3wiki </ 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: