Toolbar

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.

Customize the collapsing point

Depending on the content in your toolbar, you might need to change the point at which your toolbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Requires JavaScript

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

{% highlight html %} {% endhighlight %}

Plugin dependency

The responsive toolbar requires the collapse plugin to be included in your version of Bootstrap.

Make toolbars accessible

Be sure to add a role="navigation" to every toolbar to help with accessibility.

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> to create a toolbar.

{% highlight html %} {% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the toolbar.

{% highlight html %} {% endhighlight %}

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

{% highlight html %} {% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

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.

Right aligning multiple components

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.

{% highlight html %} {% endhighlight %}

Body padding required

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.

{% highlight scss %} body { padding-top: 45px; } {% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

Body padding required

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.

{% highlight scss %} body { padding-bottom: 45px; } {% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

Modify the look of the navbar by adding .navbar-inverse.

{% highlight html %} {% endhighlight %}