Bootstrap 4 Components
Navbar is a wrapper that is used to contain and position navigation element, branding and other elements like a form into a header.
Navbar is responsive by default. That it collapses on a smaller viewport and aligns horizontally on larger viewports. This behavior can be overridden
You can create a navbar using classes .navbar with
.navbar-expand-* and the contents wrapped inside it.
Let’s see a simple example for a navbar just three navigation links.
To add a branding logo or text to the navbar we can use
.navbar-brand with possibly any element but preferably with anchor elements.
Note: Images can also be added as navbar brand. Be sure to use proper sizing utilities to the image according to your need.
Add a dropdown to your navbar by adding
.nav-item in the
<li> element and nesting the dropdown menu inside it.
Now let’s add a form to our navbar. You are going to need the class
.form-inline with your
Adding text the navbar is easy. You need the class
.navbar-text to add any text to the navbar.
.navbar-light when using light background colors and
.navbar-dark when using dark background colors. Customize the background color of your navbar with
.bg-* utilities or choose a color of your own liking.
You can position your navbar either on the top or on the bottom so that even when the page is scrolled up or down the navbar remains at its fixed position. Use classes
.fixed-bottom to achieve this.
Navbar Toggler Alignment
Navbar toggler can be aligned on the left or on the right using the classes