Utilities / helpers
MDB Admin Dashboard 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
element. Great for images, buttons, or any other element.
floats by adding
.clearfix to the parent
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
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-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
Includes support for
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
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.
Read the full documentation for these components.Learn more