MDBootstrap includes dozens of utilities—classes with a single purpose. They’re designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
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.