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...