Bootstrap 4 Components

Navbars

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 .dropdown with .nav-item in the <li> element and nesting the dropdown menu inside it.

Forms

Now let’s add a form to our navbar. You are going to need the class .form-inline with your <form> element.

Adding Text

Adding text the navbar is easy. You need the class .navbar-text to add any text to the navbar.

Color Schemes

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

Fixed Navbar

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-top or .fixed-bottom to achieve this.

Navbar toggler can be aligned on the left or on the right using the classes .navbar-toggler-left or .navbar-toggler-right.

Summary

  1. Navbar Brand
  2. Dropdown
  3. Forms
  4. Adding Text
  5. Color Schemes
  6. Fixed Navbar
  7. Navbar Toggler Alignment