Bootstrap 4 tutorial

Components (10): Navbar

Component suite for navigation bars.

Basic example


(1) Standard (a|span).navbar-brand
(2) Heading-styled (a|span).navbar-brand.h1
(3) Image only
(4) Image and text

A navbar usually has a nav and also behaves responsively with a toggler. A nav is set inside of a collapsing wrapper. A toggler collapses a nav when the viewport width is smaller than the specified breakpoint.


Inline forms form.form-inline can be used within a navbar.

(1) Basic example (no toggler)
(2) Alignment
(3) Using the input group
(4) Buttons + sizing

Use span.navbar-text for the plain text inside the navbar.

Example (1)
Example (2)

Color schemes

Set both the text color scheme and the background color.

Examples (based on official document examples)

nav.navbar.navbar-light + Attribute style="background-color: #e3f2fd;"


Setting a navbar outside the container (usually as a child of body ) displays as 100% width to the viewport (the example below).

All other navbars in this page are set as children of a container div.container. Their widths are responsive to the viewport and display center-aligned.

The last example looks same as above. But it sets extra padding before a brand on lg or greater.

A container sets horizontal 15px paddings (gutters) on left and right as default. But a container inside a navbar with a collapted state removes gutters.


(1) Default nav.navbar (scrolls relative to the page)
(2) Fixed top nav.navbar.fixed-top

Demo page

(3) Fixed bottom nav.navbar.fixed-bottom

Demo page

(4) Sticky top nav.navbar.sticky-top

Demo page

Responsive behaviors

A navbar acts responsively with a toggler.

Basic example

Toggler breakpoint is specified with .navbar-expand-(sm|md|lg|xl). To set navbar always expanded, use .navbar-expand. The example below is identical to above but replacing .nabvar-expand-md to .nabvar-expand (does not collapse).

Variation (1) Hides brand on collapsed (displays an icon only)
Variation (2) On collapsed, shows brand on right, icon on left
Collapsing an external content

Toggler also can be used to expand/collapse a content outside a navbar. See the example below.