Similar to the contextual text color classes, easily set the background of an element to any contextual class.
Easily highlight new or unread items by adding a badge to links, Bootstrap navs, and more.
Use carets to indicate dropdown functionality and direction.
Set an element to display: block and center via margin
Easily clear floats by adding
.clearfix to the parent element.
Use the generic close icon for dismissing content like modals and alerts.
data-%property% attributes to the element
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.
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
Float an element to the left or right with a class.
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
Combine .sr-only with
.sr-only-focusable to show the element again when it's focused (e.g.
Easily realign text to components with text alignment classes.
Convey meaning through color with a handful of emphasis utility 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
Use the well as a simple effect on an element to give it an inset effect.