Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Justified navbar nav links are currently not supported.
Replace the navbar brand with your own image by swapping the text for an
<img>. Since the
.navbar-brand has its own padding and height, you may
need to override some CSS depending on your image.
Place form content within
.navbar-form for proper vertical alignment and
collapsed behavior in narrow viewports. Use the alignment options to decide
where it resides within the navbar content.
.navbar-btn class to
<button> elements not residing in a
to vertically center them in the navbar.
Wrap strings of text in an element with
.navbar-text, usually on a
<p> tag for proper leading and color.
For folks using standard links that are not within the regular navbar
navigation component, use the
.navbar-link class to add the proper colors for
the default and inverse navbar options.
Align nav links, forms, buttons, or text, using the
.navbar-right utility classes. Both classes will add a CSS float in the
specified direction. For example, to align nav links, put them in a separate
<ul> with the respective utility class applied.
Fixed to Top
.navbar-fixed-top and include a
center and pad navbar content.
Fixed to Bottom
.navbar-fixed-bottom and include a
to center and pad navbar content.
Create a full-width navbar that scrolls away with the page by adding
.navbar-static-top and include a
.container-fluid to center
and pad navbar content.
Modify the look of the navbar by adding