Similar to the contextual text color classes, easily set the background of an element to any contextual class.
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Easily highlight new or unread items by adding a badge to links, Bootstrap navs, and more.
Easily highlight new or unread items by adding a badge to links, Bootstrap navs, and more.
Default button
Use carets to indicate dropdown functionality and direction.
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Set an element to display: block and center via margin
Set an element to display: block and center via margin
Easily clear floats by adding .clearfix
to the parent element.
Easily clear floats by adding .clearfix
to the parent element.
Utilizes the micro clearfix as popularized by Nicolas Gallagher.
Use the generic close icon for dismissing content like modals and alerts.
Use the generic close icon for dismissing content like modals and alerts.
Glyphicon
Add classes to an img
element to easily style images in any project.
Add classes to an img
element to easily style images in any project.
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
Generates unique element ID
Float an element to the left or right with a class.
Float an element to the left or right with a class.
!important
is included to avoid specificity issues.
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.
Hide an element to all devices except screen readers with .sr-only
Hide an element to all devices except screen readers with .sr-only
Combine .sr-only with .sr-only-focusable
to show the element again when it's focused (e.g.
Combine .sr-only with .sr-only-focusable
to show the element again when it's focused (e.g. by a keyboard-only user)
Easily realign text to components with text alignment classes.
Easily realign text to components with text alignment classes.
Utilize the .text-hide
class or mixin to help replace an element's text content with a background image.
Utilize the .text-hide
class or mixin to help replace an element's text content with a background image.
Convey meaning through color with a handful of emphasis utility classes.
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Transform text in components with text capitalization classes.
Transform text in components with text capitalization classes.
Force an element to be shown or hidden (including for screen readers) with the use of .show
and .hidden
classes.
Force an element to be shown or hidden (including for screen readers) with the use of .show
and .hidden
classes.
These classes use !important
to avoid specificity conflicts, just like the quick floats.
They are only available for block level toggling. They can also be used as mixins.
.hide
is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden
or .sr-only
instead.
Furthermore, .invisible
can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
Use the well as a simple effect on an element to give it an inset effect.
Use the well as a simple effect on an element to give it an inset effect.