Navbar Text Navbar text
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).
< nav class ="navbar navbar-expand-sm bg-dark navbar-dark" >
< div class ="container-fluid" >
< span class ="navbar-text" > Navbar text</ span >
</ div >
</ nav >
Navbar With Dropdown Navbars can also hold dropdown menus:
< li class ="nav-item dropdown" >
< a class ="nav-link dropdown-toggle" href ="#" role ="button" data-bs-toggle ="dropdown" > Dropdown</ a >
< ul class ="dropdown-menu" >
< li >< a class ="dropdown-item" href ="#" > Link</ a ></ li >
< li >< a class ="dropdown-item" href ="#" > Another link</ a ></ li >
< li >< a class ="dropdown-item" href ="#" > A third link</ a ></ li >
</ ul >
</ li >
Navbar Forms and Buttons You can also include forms inside the navigation bar:
< nav class ="navbar navbar-expand-sm navbar-dark bg-dark" >
< div class ="container-fluid" >
< a class ="navbar-brand" href ="javascript:void(0)" > Logo</ a >
< button class ="navbar-toggler" type ="button" data-bs-toggle ="collapse" data-bs-target ="#mynavbar" >
< span class ="navbar-toggler-icon" ></ span >
</ button >
< div class ="collapse navbar-collapse" id ="mynavbar" >
< ul class ="navbar-nav me-auto" >
< li class ="nav-item" >
< a class ="nav-link" href ="javascript:void(0)" > Link</ a >
</ li >
< li class ="nav-item" >
< a class ="nav-link" href ="javascript:void(0)" > Link</ a >
</ li >
< li class ="nav-item" >
< a class ="nav-link" href ="javascript:void(0)" > Link</ a >
</ li >
</ ul >
< form class ="d-flex" >
< input class ="form-control me-2" type ="text" placeholder ="Search" >
< button class ="btn btn-primary" type ="button" > Search</ button >
</ form >
</ div >
</ div >
</ nav >
Fixed Navigation Bar The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .fixed-top class makes the navigation bar fixed at the top :
< nav class ="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" >
...
</ nav >
Use the .fixed-bottom class to make the navbar stay at the bottom of the page:
Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).
< nav class ="navbar navbar-expand-sm bg-dark navbar-dark sticky-top" >
...
</ nav >
Add your favorite Color
< nav class ="navbar navbar-light" style ="background-color: #e3f2fd;" >
<!-- Navbar content -->
</ nav >
Add side navbar
< nav class ="navbar navbar-light bg-light fixed-top" >
< div class ="container-fluid" >
< a class ="navbar-brand" href ="#" > Offcanvas navbar</ a >
< button class ="navbar-toggler" type ="button" data-bs-toggle ="offcanvas" data-bs-target ="#offcanvasNavbar" aria-controls ="offcanvasNavbar" >
< span class ="navbar-toggler-icon" ></ span >
</ button >
< div class ="offcanvas offcanvas-end" tabindex ="-1" id ="offcanvasNavbar" aria-labelledby ="offcanvasNavbarLabel" >
< div class ="offcanvas-header" >
< h5 class ="offcanvas-title" id ="offcanvasNavbarLabel" > Offcanvas</ h5 >
< button type ="button" class ="btn-close text-reset" data-bs-dismiss ="offcanvas" aria-label ="Close" ></ button >
</ div >
< div class ="offcanvas-body" >
< ul class ="navbar-nav justify-content-end flex-grow-1 pe-3" >
< li class ="nav-item" >
< a class ="nav-link active" aria-current ="page" href ="#" > Home</ a >
</ li >
< li class ="nav-item" >
< a class ="nav-link" href ="#" > Link</ a >
</ li >
< li class ="nav-item dropdown" >
< a class ="nav-link dropdown-toggle" href ="#" id ="offcanvasNavbarDropdown" role ="button" data-bs-toggle ="dropdown" aria-expanded ="false" >
Dropdown
</ a >
< ul class ="dropdown-menu" aria-labelledby ="offcanvasNavbarDropdown" >
< li >< a class ="dropdown-item" href ="#" > Action</ a ></ li >
< li >< a class ="dropdown-item" href ="#" > Another action</ a ></ li >
< li >
< hr class ="dropdown-divider" >
</ li >
< li >< a class ="dropdown-item" href ="#" > Something else here</ a ></ li >
</ ul >
</ li >
</ ul >
< form class ="d-flex" >
< input class ="form-control me-2" type ="search" placeholder ="Search" aria-label ="Search" >
< button class ="btn btn-outline-success" type ="submit" > Search</ button >
</ form >
</ div >
</ div >
</ div >
</ nav >
Containers
Use any of the responsive containers to change how wide the content in your navbar is presented.
< div class ="container" >
< nav class ="navbar navbar-expand-lg navbar-light bg-light" >
< div class ="container-fluid" >
< a class ="navbar-brand" href ="#" > Navbar</ a >
</ div >
</ nav >
</ div >
