Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Navigation Bar

A navigation bar is a navigation header that is placed at the top of the page.

A navigation bar is used in every website to make it more user-friendly.

Basic Navigation Bar

A standard navigation bar is created with the .navbar class.

Run code

Example explained:

The .navbar class is used to create a navigation bar.

Make navbar responsive by using .navbar-expand-{sm|md|lg|xl} class (navbar is vertically stacked in small screens).

The .bg-light is a contextual class that specifies light background color.

To add links inside the navbar, use a <ul> element with class="navbar-nav".

Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class.

Vertical Navigation Bar

Remove the .navbar-expand-{sm|md|lg|xl} class to create a vertical navigation bar.

Run code

Brand / Logo

Add .navbar-brand class to highlight the brand/logo name of your page.

The .navbar-brand class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Run code

When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar vertically.

Run code

We can also include text along with the brand image.

Run code

Color Schemes

The background-color utilities are used to change the background color of the navbar.

The background-color classes are:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light
Run code

The .navbar-dark class is used to set links text color to white and .navbar-light class is used to set links text color to black.

Add the .active class to an anchor element to highlight the current link.

Navbar with Dropdown

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Run code

Navbar Forms and Buttons

Place various form controls and components within a navbar with .form-inline class.

Run code

Immediate children elements in .navbar use flex layout and will default to justify-content: between.

Run code

Navbar Text

Navbars may contain bits of text with the help of .navbar-text class.

This class adjusts vertical alignment and horizontal spacing for strings of text.

Run code

Responsive/Collapsing Navigation Bar

The collapsing navbar is used on small screens. It hides the navigation links and replaces with a button.

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand-{sm|md|lg|xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

Run code

If you remove .navbar-brand, the toggler button will be aligned on the left:

Run code

If you want your toggler on the left and brand name on the right consider the following example:

Run code

The following example shows how to use different breakpoints:

Run code

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .fixed-top class makes the navigation bar fixed at the top.

Run code

Tip: To prevent the navbar from sitting on top of other content in the body of the page, add at least 50 pixels of margin-top to the first element after navbar or try your own values.

The .fixed-bottom class makes the navigation bar fixed at the bottom.

Run code

Add .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.

Run code

Also note that .sticky-top uses position:sticky, which isn’t fully supported in every browser.

IE11 and IE10 will render position: sticky as position: relative.