Bootstrap 4 Navbars

• Bootstrap Navs
• Bootstrap Breadcrumbs

Add a fully-functional, responsive navbar to your website with minimal code.

The Bootstrap 4 navbar is a simple wrapper for positioning branding, navigation, and other elements into a navigation header.

Basic Navbar

Here's an explanation:

• Wrap everything inside a nav element with the .navbar class and a .navbar-expand{-sm|-md|-lg|-xl} class, along with a color scheme.
• For the togglable menu on smaller devices, use a button element with .navbar-toggler. To display the "hamburger", use the .navbar-toggler-icon class on a span element.
• For a list of links, use a ul with the .navbar-nav class.
• For each individual list item, use li with .nav-item.
• For the individual links use a with .nav-link.

Navbars with Dropdowns

You can add dropdown menus to your navbar. Just add the dropdown code to a li element with the .dropdown class applied.

Current Page

Use the .active class to mark a link as the current page or section (apply it to the li).

Also add a span with .sr-only to communicate this to screen readers.

Navbar with Form Controls

You can include form controls within a navbar by adding the .form-inline to the form element. Here we also use . mr-auto on the previous element so that the form is aligned to the right.

View this example in a new window to see how it looks on a wider viewport.

Alignment

You can use any of the spacing utilities (such as mr-auto) or any of the flexbox alignment utilities (such as .justify-content-end) to align elements within the navbar.

The flexbox classes take their names from the actual flexbox property/value declaration. This makes it easy to guess the name of the most appropriate class for a given situation.

You can also add a responsive abbreviation to effect an alignment only on certain viewport sizes. For example, .justify-content-lg-end applies justify-content: end on large devices and up.

Colors

Bootstrap provides various options for adding color to navbars. The way it works is, you specify light or dark (via .navbar-light or .navbar-dark), then specify a color. Color can be specified either via one of Bootstrap's color classes (eg, .bg-primary, .bg-dark), or by specifying your own color with CSS (eg, using background-color).

The previous examples already specify the navbar color. Here are some more examples.

Primary Color, Light

Here, we use .bg-primary along with .navbar-light:

Primary Color, Dark

Here, we use .bg-primary along with .navbar-dark:

Custom Color

To specify your own custom color, omit any .bg-* class (eg, remove .bg-primary) and add your own color using CSS.

Fixed Navbars

You can fix a navbar to the top or bottom of the viewport by using either .fixed-top or .fixed-bottom.

Fixed Top

Fixed Bottom

• Bootstrap Navs
• Bootstrap Breadcrumbs