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
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.
Appends data-%property%
attributes to the element
Appends data-%property%
attributes to the element
Value type
Properties
Modifier
Default icon
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.
Non-breaking Space A common character entity used in HTML is the non-breaking space: A non-breaking space is a space that will not break into a new line.
Non-breaking Space A common character entity used in HTML is the non-breaking space: A non-breaking space is a space that will not break into a new line.
Generates unique element ID
Generates unique element ID
No-op frag
No-op frag
No-op modifier
No-op modifier
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.
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.