React Bootstrap Utilities
React Utilities - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Go to docs v.5
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
display utilities for responsively toggling
common values of the
display property. Mix it with our grid system, content, or components to show or hide them across
Bootstrap 4 is built with flexbox, but not every element’s
display has been changed to
display: flex as this would add many unnecessary overrides and unexpectedly change key browser
of our components are built with flexbox enabled.
Should you need to add
display: flex to an element, do so with
.d-flex or one of the responsive variants (e.g.,
.d-sm-flex). You’ll need this class or
display value to allow the use of our extra
flexbox utilities for sizing, alignment,
spacing, and more.
Margin and padding
spacing utilities to control how elements and
components are spaced and sized. Bootstrap 4 includes a five-level
scale for spacing utilities, based on a
1rem value default
$spacer variable. Choose values for all viewports (e.g.,
margin-right: 1rem), or pick responsive variants to target specific viewports (e.g.,
margin-right: 1rem starting at the
display isn’t needed, you can toggle the
visibility of an element with our
visibility utilities. Invisible elements
will still affect the layout of the page, but are visually hidden from visitors.