Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Glyphicons

Available glyphs

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

glyphicon glyphicon-asterisk

glyphicon glyphicon-plus

glyphicon glyphicon-euro

glyphicon glyphicon-eur

glyphicon glyphicon-minus

glyphicon glyphicon-cloud

glyphicon glyphicon-envelope

glyphicon glyphicon-pencil

glyphicon glyphicon-glass

glyphicon glyphicon-music

glyphicon glyphicon-search

glyphicon glyphicon-heart

glyphicon glyphicon-star

glyphicon glyphicon-star-empty

glyphicon glyphicon-user

glyphicon glyphicon-film

glyphicon glyphicon-th-large

glyphicon glyphicon-th

glyphicon glyphicon-th-list

glyphicon glyphicon-ok

glyphicon glyphicon-remove

glyphicon glyphicon-zoom-in

glyphicon glyphicon-zoom-out

glyphicon glyphicon-off

glyphicon glyphicon-signal

glyphicon glyphicon-cog

glyphicon glyphicon-trash

glyphicon glyphicon-home

glyphicon glyphicon-file

glyphicon glyphicon-time

glyphicon glyphicon-road

glyphicon glyphicon-download-alt

glyphicon glyphicon-download

glyphicon glyphicon-upload

glyphicon glyphicon-inbox

glyphicon glyphicon-play-circle

glyphicon glyphicon-repeat

glyphicon glyphicon-refresh

glyphicon glyphicon-list-alt

glyphicon glyphicon-lock

glyphicon glyphicon-flag

glyphicon glyphicon-headphones

glyphicon glyphicon-volume-off

glyphicon glyphicon-volume-down

glyphicon glyphicon-volume-up

glyphicon glyphicon-qrcode

glyphicon glyphicon-barcode

glyphicon glyphicon-tag

glyphicon glyphicon-tags

glyphicon glyphicon-book

glyphicon glyphicon-bookmark

glyphicon glyphicon-print

glyphicon glyphicon-camera

glyphicon glyphicon-font

glyphicon glyphicon-bold

glyphicon glyphicon-italic

glyphicon glyphicon-text-height

glyphicon glyphicon-text-width

glyphicon glyphicon-align-left

glyphicon glyphicon-align-center

glyphicon glyphicon-align-right

glyphicon glyphicon-align-justify

glyphicon glyphicon-list

glyphicon glyphicon-indent-left

glyphicon glyphicon-indent-right

glyphicon glyphicon-facetime-video

glyphicon glyphicon-picture

glyphicon glyphicon-map-marker

glyphicon glyphicon-adjust

glyphicon glyphicon-tint

glyphicon glyphicon-edit

glyphicon glyphicon-share

glyphicon glyphicon-check

glyphicon glyphicon-move

glyphicon glyphicon-step-backward

glyphicon glyphicon-fast-backward

glyphicon glyphicon-backward

glyphicon glyphicon-play

glyphicon glyphicon-pause

glyphicon glyphicon-stop

glyphicon glyphicon-forward

glyphicon glyphicon-fast-forward

glyphicon glyphicon-step-forward

glyphicon glyphicon-eject

glyphicon glyphicon-chevron-left

glyphicon glyphicon-chevron-right

glyphicon glyphicon-plus-sign

glyphicon glyphicon-minus-sign

glyphicon glyphicon-remove-sign

glyphicon glyphicon-ok-sign

glyphicon glyphicon-question-sign

glyphicon glyphicon-info-sign

glyphicon glyphicon-screenshot

glyphicon glyphicon-remove-circle

glyphicon glyphicon-ok-circle

glyphicon glyphicon-ban-circle

glyphicon glyphicon-arrow-left

glyphicon glyphicon-arrow-right

glyphicon glyphicon-arrow-up

glyphicon glyphicon-arrow-down

glyphicon glyphicon-share-alt

glyphicon glyphicon-resize-full

glyphicon glyphicon-resize-small

glyphicon glyphicon-exclamation-sign

glyphicon glyphicon-gift

glyphicon glyphicon-leaf

glyphicon glyphicon-fire

glyphicon glyphicon-eye-open

glyphicon glyphicon-eye-close

glyphicon glyphicon-warning-sign

glyphicon glyphicon-plane

glyphicon glyphicon-calendar

glyphicon glyphicon-random

glyphicon glyphicon-comment

glyphicon glyphicon-magnet

glyphicon glyphicon-chevron-up

glyphicon glyphicon-chevron-down

glyphicon glyphicon-retweet

glyphicon glyphicon-shopping-cart

glyphicon glyphicon-folder-close

glyphicon glyphicon-folder-open

glyphicon glyphicon-resize-vertical

glyphicon glyphicon-resize-horizontal

glyphicon glyphicon-hdd

glyphicon glyphicon-bullhorn

glyphicon glyphicon-bell

glyphicon glyphicon-certificate

glyphicon glyphicon-thumbs-up

glyphicon glyphicon-thumbs-down

glyphicon glyphicon-hand-right

glyphicon glyphicon-hand-left

glyphicon glyphicon-hand-up

glyphicon glyphicon-hand-down

glyphicon glyphicon-circle-arrow-right

glyphicon glyphicon-circle-arrow-left

glyphicon glyphicon-circle-arrow-up

glyphicon glyphicon-circle-arrow-down

glyphicon glyphicon-globe

glyphicon glyphicon-wrench

glyphicon glyphicon-tasks

glyphicon glyphicon-filter

glyphicon glyphicon-briefcase

glyphicon glyphicon-fullscreen

glyphicon glyphicon-dashboard

glyphicon glyphicon-paperclip

glyphicon glyphicon-heart-empty

glyphicon glyphicon-link

glyphicon glyphicon-phone

glyphicon glyphicon-pushpin

glyphicon glyphicon-usd

glyphicon glyphicon-gbp

glyphicon glyphicon-sort

glyphicon glyphicon-sort-by-alphabet

glyphicon glyphicon-sort-by-alphabet-alt

glyphicon glyphicon-sort-by-order

glyphicon glyphicon-sort-by-order-alt

glyphicon glyphicon-sort-by-attributes

glyphicon glyphicon-sort-by-attributes-alt

glyphicon glyphicon-unchecked

glyphicon glyphicon-expand

glyphicon glyphicon-collapse-down

glyphicon glyphicon-collapse-up

glyphicon glyphicon-log-in

glyphicon glyphicon-flash

glyphicon glyphicon-log-out

glyphicon glyphicon-new-window

glyphicon glyphicon-record

glyphicon glyphicon-save

glyphicon glyphicon-open

glyphicon glyphicon-saved

glyphicon glyphicon-import

glyphicon glyphicon-export

glyphicon glyphicon-send

glyphicon glyphicon-floppy-disk

glyphicon glyphicon-floppy-saved

glyphicon glyphicon-floppy-remove

glyphicon glyphicon-floppy-save

glyphicon glyphicon-floppy-open

glyphicon glyphicon-credit-card

glyphicon glyphicon-transfer

glyphicon glyphicon-cutlery

glyphicon glyphicon-header

glyphicon glyphicon-compressed

glyphicon glyphicon-earphone

glyphicon glyphicon-phone-alt

glyphicon glyphicon-tower

glyphicon glyphicon-stats

glyphicon glyphicon-sd-video

glyphicon glyphicon-hd-video

glyphicon glyphicon-subtitles

glyphicon glyphicon-sound-stereo

glyphicon glyphicon-sound-dolby

glyphicon glyphicon-sound-5-1

glyphicon glyphicon-sound-6-1

glyphicon glyphicon-sound-7-1

glyphicon glyphicon-copyright-mark

glyphicon glyphicon-registration-mark

glyphicon glyphicon-cloud-download

glyphicon glyphicon-cloud-upload

glyphicon glyphicon-tree-conifer

glyphicon glyphicon-tree-deciduous

glyphicon glyphicon-cd

glyphicon glyphicon-save-file

glyphicon glyphicon-open-file

glyphicon glyphicon-level-up

glyphicon glyphicon-copy

glyphicon glyphicon-paste

glyphicon glyphicon-alert

glyphicon glyphicon-equalizer

glyphicon glyphicon-king

glyphicon glyphicon-queen

glyphicon glyphicon-pawn

glyphicon glyphicon-bishop

glyphicon glyphicon-knight

glyphicon glyphicon-baby-formula

glyphicon glyphicon-tent

glyphicon glyphicon-blackboard

glyphicon glyphicon-bed

glyphicon glyphicon-apple

glyphicon glyphicon-erase

glyphicon glyphicon-hourglass

glyphicon glyphicon-lamp

glyphicon glyphicon-duplicate

glyphicon glyphicon-piggy-bank

glyphicon glyphicon-scissors

glyphicon glyphicon-bitcoin

glyphicon glyphicon-btc

glyphicon glyphicon-xbt

glyphicon glyphicon-yen

glyphicon glyphicon-jpy

glyphicon glyphicon-ruble

glyphicon glyphicon-rub

glyphicon glyphicon-scale

glyphicon glyphicon-ice-lolly

glyphicon glyphicon-ice-lolly-tasted

glyphicon glyphicon-education

glyphicon glyphicon-option-horizontal

glyphicon glyphicon-option-vertical

glyphicon glyphicon-menu-hamburger

glyphicon glyphicon-modal-window

glyphicon glyphicon-oil

glyphicon glyphicon-grain

glyphicon glyphicon-sunglasses

glyphicon glyphicon-text-size

glyphicon glyphicon-text-color

glyphicon glyphicon-text-background

glyphicon glyphicon-object-align-top

glyphicon glyphicon-object-align-bottom

glyphicon glyphicon-object-align-horizontal

glyphicon glyphicon-object-align-left

glyphicon glyphicon-object-align-vertical

glyphicon glyphicon-object-align-right

glyphicon glyphicon-triangle-right

glyphicon glyphicon-triangle-left

glyphicon glyphicon-triangle-bottom

glyphicon glyphicon-triangle-top

glyphicon glyphicon-console

glyphicon glyphicon-superscript

glyphicon glyphicon-subscript

glyphicon glyphicon-menu-left

glyphicon glyphicon-menu-right

glyphicon glyphicon-menu-down

glyphicon glyphicon-menu-up

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested
<span>
and apply the icon classes to the
<span>
.

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Changing the icon font location

Bootstrap assumes icon font files will be located in the
../fonts/
directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

Change the @icon-font-path and/or @icon-font-name variables in the source Less files.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the
aria-hidden="true"
attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the
.sr-only
class.

If you're creating controls with no other text (such as a
<button>
that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an
aria-label
attribute on the control itself.

<spanclass="glyphicon glyphicon-search"aria-hidden="true"></span>

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add
.dropdown-menu-right
to a
.dropdown-menu
to right align the dropdown menu.

May require additional positioning

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain
overflow
properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

Deprecated
.pull-right
alignment

As of v3.1.0, we've deprecated
.pull-right
on dropdown menus. To right-align a menu, use
.dropdown-menu-right
. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use
.dropdown-menu-left
.

Button groups

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a
.btn-group
, you'll have to specify the option
container: 'body'
to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Ensure correct
role
and provide a label

In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate
role
attribute needs to be provided. For button groups, this would be
role="group"
, while toolbars should have a
role="toolbar"
.

One exception are groups which only contain a single control (for instance the justified button groups with
<button>
elements) or a dropdown.

In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct
role
attribute. In the examples provided here, we use
aria-label
, but alternatives such as
aria-labelledby
can also be used.

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Handling borders

Due to the specific HTML and CSS used to justify buttons (namely
display: table-cell
), the borders between them are doubled. In regular button groups,
margin-left: -1px
is used to stack the borders instead of removing them. However,
margin
doesn't work with
display: table-cell
. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on
<a>
or
<button>
elements. To get around that, wrap each button in another
.btn-group
.

Links acting as buttons

If the
<a>
elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate
role="button"
.

With
<button>
elements

To use justified button groups with
<button>
elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to
<button>
elements, but since we support button dropdowns, we can work around that.

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based
<input>
. Use
.input-group
with an
.input-group-addon
or
.input-group-btn
to prepend or append elements to a single
.form-control
.

Textual
<input>
s only

Avoid using
<select>
elements here as they cannot be fully styled in WebKit browsers.

Avoid using
<textarea>
elements here as their
rows
attribute will not be respected in some cases.

Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an
.input-group
, you'll have to specify the option
container: 'body'
to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (visible
<label>
elements,
<label>
elements hidden using the
.sr-only
class, or use of the
aria-label
,
aria-labelledby
,
aria-describedby
,
title
or
placeholder
attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons (.input-group-addon or .input-group-btn) on a single side.

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of
.input-group-addon
, you'll need to use
.input-group-btn
to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Navs

Navs available in Bootstrap have shared markup, starting with the base
.nav
class, as well as shared states. Swap modifier classes to switch between each style.

Using navs for tab panels requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional
role
and ARIA attributes – see the plugin's example markup for further details.

Make navs used as navigation accessible

If you are using navs to provide a navigation bar, be sure to add a
role="navigation"
to the most logical parent container of the
<ul>
, or wrap a
<nav>
element around the whole navigation. Do not add the role to the
<ul>
itself, as this would prevent it from being announced as an actual list by assistive technologies.

Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with
.nav-justified
. On smaller screens, the nav links are stacked.

Justified navbar nav links are currently not supported.

Safari and responsive justified navs

As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

Navbar

Default navbar

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.

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Requires JavaScript plugin

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
.

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

Changing the collapsed mobile navbar breakpoint

The navbar 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 navbar collapses/expands. The default value is
768px
(the smallest "small" or "tablet" screen).

Make navbars accessible

Be sure to use a
<nav>
element or, if using a more generic element such as a
<div>
, add a
role="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Mobile device caveats

Always add labels

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.

Buttons

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

<pclass="navbar-text navbar-right">Signed in as <ahref="#"class="navbar-link">Mark Otto</a></p>

Component alignment

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

Navbars 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.

Fixed to top

Add
.navbar-fixed-top
and include a
.container
or
.container-fluid
to center and pad navbar content.

Labelling the pagination component

The pagination component should be wrapped in a
<nav>
element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive
aria-label
for the
<nav>
which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be
aria-label="Search results pages"
.

Disabled and active states

Links are customizable for different circumstances. Use
.disabled
for unclickable links and
.active
to indicate the current page.

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own
inline-block
element (like an icon). The way around this is setting
display: inline-block;
. For context and an example, see #13219.

Badges

Easily highlight new or unread items by adding a
<span class="badge">
to links, Bootstrap navs, and more.

To make the jumbotron full width, and without rounded corners, place it outside all
.container
s and instead add a
.container
within.

<divclass="jumbotron"><divclass="container">
...
</div></div>

Page header

A simple shell for an
h1
to appropriately space out and segment sections of content on a page. It can utilize the
h1
's default
small
element, as well as most other components (with additional styles).

Progress bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Content Security Policy (CSP) compatibility

If your website has a Content Security Policy (CSP) which doesn't allow
style-src 'unsafe-inline'
, then you won't be able to use inline
style
attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets
element.style.width
) or using custom CSS classes.

The classes
.pull-left
and
.pull-right
also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to
.media-left
and
.media-right
, except that
.media-right
should be placed after the
.media-body
in the html.

Media alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Button items

List group items may be buttons instead of list items (that also means a parent
<div>
instead of an
<ul>
). No need for individual parents around each element. Don't use the standard .btn classes here.

Panel with heading

Easily add a heading container to your panel with
.panel-heading
. You may also include any
<h1>
-
<h6>
with a
.panel-title
class to add a pre-styled heading. However, the font sizes of
<h1>
-
<h6>
are overridden by
.panel-heading
.

For proper link coloring, be sure to place links in headings within
.panel-title
.

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to
<iframe>
,
<embed>
,
<video>
, and
<object>
elements; optionally use an explicit descendant class
.embed-responsive-item
when you want to match the styling for other attributes.

Pro-Tip! You don't need to include
frameborder="0"
in your
<iframe>
s as we override that for you.