Bootstrap Navbar Examples
PBS 69

A collection of Bootstrap Navbar components.

Above is a very basic Navbar. At the top level it contains just two things, a toggler, and a collapsible region. The collapsible region contains just a single Nav. The Nav contains two links, and a dropdown with three additional links. This Navbar uses the dark style variant (.navbar-dark) with the dark background from the Bootstrap colour utilities (.bg-dark).

Above is a Navbar containing a brand. At the top level it contains three things, a toggler, a brand, and a collapsible region. The collapsible region contains just a single Nav. The Nav contains two links, and a dropdown with three additional links. This Navbar uses the light style variant (.navbar-light) with the light background from the Bootstrap colour utilities (.bg-light).

Above is a Navbar containing a brand and some text. At the top level it contains three things, a toggler, a brand, and a collapsible region. The collapsible region contains a text region and a Nav. The Nav contains two links, and a dropdown with three additional links. This Navbar uses the light style variant (.navbar-light) with a custom background colour (style="background-color: #f1fcd6;").

Above is a Navbar containing a brand and some text. At the top level it contains three things, a toggler, a brand, and a collapsible region. The collapsible region contains a text region, a Nav, and an inline form. The Nav contains two links, and a dropdown with three additional links. The inline form contains an inpupt group consisting of a text box and a button. This Navbar uses the dark style variant (.navbar-dark) with a custom background colour (style="background-color: #86b50d;").