Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label.

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Swap text for background images with the image replacement class.

Use these shorthand utilities for quickly configuring the position of an element.

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. by a keyboard-only user). Can also be used as mixins.

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default.

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Control the visibility, without modifying the display, of elements with visibility utilities.