brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Navbar

Navbar

Navbars come with built-in support for a handful of sub-components. Here’s an example of all the sub-components included in a responsive light-themed navbar.

Brand

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size.

Nav

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling.

Forms

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

Text

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

Color schemes

Theming the navbar using theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

Container

Wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

Togglers

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.

External Content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. It works on the id and data-target matching, that’s easily done!