Utilities for layout
Vue Bootstrap 5 Utilities for layout
To speed up the creation of mobile-friendly and responsive elements, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
Changing display
Use display utilities
for responsively toggling common values of the display property. You can combine them with grid system,
content, or components to show or hide them across specific viewports.
Flexbox options
MDBootstrap 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 behaviors. Most 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
Use the margin and padding
spacing utilities
to control how elements and components are spaced and sized. Bootstrap includes a six-level
scale for spacing utilities, based on a 1rem value default
$spacer variable. Choose values for all viewports (e.g., .me-3 for
margin-right: 1rem), or pick responsive variants to target specific viewports
(e.g., .me-md-3 for margin-right: 1rem starting at the
md breakpoint).
Toggle visibility
When toggling 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.