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 =
< 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 >
</ 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: 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 =
< 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:
Last Updated :
11 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...