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