Supported Content
Brand
Brand
Image and Text
Nav
Nav without List
Dropdown
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item
and .nav-link
as shown below.
Forms
Inline Form Elements
Place various form controls and components within a navbar with .form-inline
.
Inline Form Elements
Align the contents of your inline forms with utilities as needed.
Input Groups
Buttons
Text
Text
Mix and match with other components
Color Schemes
Containers
When the container is within your navbar
Placement
Full Width
Fixed Top
Fixed Bottom
Sticky Top
Toggler
With no .navbar-brand
shown in lowest breakpoint:
Toggler
With a brand name shown on the left and toggler on the right:
Toggler
With a toggler on the left and brand name on the right: