Bootstrap 5 navbars have collapsed and expanded features. It works on the basis of available screen size. Navbar expands features to expand the navbar in the available space at the mentioned breakpoint while as navbar collapse collapses the navbar in the small devices.
Step To Create Bootstrap Basic Horizontal Navbar Menu
.navbar
,.navbar-expand{-sm|-md|-lg|-xl}
& background color utility.navbar-light & .bg-light
to <nav>
base class.
.navbar-nav
to <ul>
base class..nav-item
to <li>
base class..nav-link
to <a>
base class.Note:Follow the above mention step to create a bootstrap basic navigation.
bootsrap .navbar-brand
shows brand name of company or brand logo.
By applying .navbar-brand
class on images, It adjusts image to fit vertically with respect to navbar.
Note:Follow the above mention steps to create bootstrap navbar having brand name.
Place brand logo inside .navbar-brand
element.
Note:Follow the above mention steps to create bootstrap navbar having brand logo.
Add .dropdown-toggle-split
to the <button>
having .dropdown-toggle
.It is used for proper spacing around the dropdown caret.
Note: Please keep in mind that assign an additional .dropdown-toggle-split
class to the <button>
element base class to make dropdown split buttons.
Use collapse concept inside navbar to create collapsing navbar.
Note:Follow the above mention steps to create bootstrap navbar having collapsing features.
.navbar
& background color utility.navbar-light .bg-light
to <nav>
base class.
.navbar-nav
to <ul>
base class.
.nav-item
to <li>
base class.
.nav-link
to <a>
base class.
Note:Follow the above mention steps to create bootstrap vertical navbar.
Add the .justify-content-center
class to center the navigation bar.
.navbar
,.navbar-expand-sm
,.justify-content-center
& background color utility.navbar-light .bg-light
to <nav>
base class.
.navbar-nav
to <ul>
element base class.
.nav-item
to <li>
element base class.
.nav-link
to <a>
element base class.
Note:Follow the above mention steps to create bootstrap centered navbar.
To change navbar background color ,navbar background color can be change very easily.use .navbar-dark
for dark background-color and .navbar-light
for light background-color.Then customize it,with the background-color utility classes i.e bg-*
.
Note:Follow the above steps to create bootstrap colored navbar.
Note: Follow the above steps to create bootstrap navbar having dropdown feature.
Note:Here,search form and button both are placed inside navbar.
Note:To place <form>
element inside navbar, assign .d-flex
to the <form>
element base class and assign .form-control
to the <form>
input control.
Note:To place <form>
element inside navbar, assign .container-fluid
to the <form>
element base class and assign .input-group
to the form controls container base class.At the end,place addon inside <span>
element and assign .input-group-text
to the <span>
element base class and also assign .form-control
to the input form control base class.
Note: To place text inside the navbar,write text information inside the <span>
element and provide .navbar-text
to the <span>
element base class.
Note: Navbar and container both are used at a time.
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:
Note: To create fixed top navbar,assign .fixed-top
to the navbar base class.
Use the .fixed-bottom
class to make the navbar stay at the bottom of the page.
Note: To create fixed bottom navbar,assign .fixed-bottom
to the
<nav>
element base class.
Use the .sticky-top
class to make the navbar fixed/stay at the top of the page when you scroll the page. This class does not work in IE11 and earlier (will treat it as position: relative).
Note: To create bootstrap 5 navbars having sticky top feature, assign .sticky-top
to the <nav>
element base class.