Toolbars 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 toolbar nav links are currently not supported.
Since TODC Bootstrap doesn't know how much space the content in your toolbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
@grid-float-breakpoint
variable or add your own media query.If JavaScript is disabled and the viewport is narrow enough that the toolbar collapses, it will be impossible to expand the toolbar and view the content within the .navbar-collapse
.
The responsive toolbar requires the collapse plugin to be included in your version of Bootstrap.
The toolbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint
, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint
in width. Adjust this variable in the Less source to control when the toolbar collapses/expands. The default value is 768px
(the smallest "small" or "tablet" screen).
Be sure to use a <nav>
element or, if using a more generic element such as a <div>
, add a role="navigation"
to every toolbar to explicitly identify it as a landmark region for users of assistive technologies.
Combine sets of <div class="btn-group">
into a <div class="btn-toolbar">
to create a toolbar.
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.
As a heads up, .navbar-form
shares much of its code with .form-inline
via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a toolbar.
There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only
class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label
, aria-labelledby
or title
attribute. If none of these is present, screen readers may resort to using the placeholder
attribute, if present, but note that use of placeholder
as a replacement for other labelling methods is not advised.
Add the .navbar-btn
class to <button>
elements not residing in a <form>
to vertically center them in the toolbar.
Like the standard button classes, .navbar-btn
can be used on <a>
and <input>
elements. However, neither .navbar-btn
nor the standard button classes should be used on <a>
elements within .navbar-nav
.
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-left
or .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.
These classes are mixin-ed versions of .pull-left
and .pull-right
, but they're scoped to media queries for easier handling of navbar components across device sizes.
Toolbars currently have a limitation with multiple .navbar-right
classes. To properly space content, we use negative margin on the last .navbar-right
element. When there are multiple elements using that class, these margins don't work as intended.
We'll revisit this when we can rewrite that component in v4.
Add .navbar-fixed-top
and include a .container
or .container-fluid
to center and pad navbar content.
The fixed toolbar will overlay your other content, unless you add padding
to the top of the <body>
. Try out your own values or use our snippet below. Tip: By default, the navbar is 38px high.
Make sure to include this after the core Bootstrap CSS.
Add .navbar-fixed-bottom
and include a .container
or .container-fluid
to center and pad navbar content.
The fixed toolbar will overlay your other content, unless you add padding
to the bottom of the <body>
. Try out your own values or use our snippet below. Tip: By default, the navbar is 38px high.
Make sure to include this after the core Bootstrap CSS.
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top
and include a .container
or .container-fluid
to center and pad navbar content.
Unlike the .navbar-fixed-*
classes, you do not need to change any padding on the body
.
Modify the look of the navbar by adding .navbar-inverse
.