Utilities for layout
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
Changingdisplay
Use our display utilities for responsively toggling common values of the displayproperty. Mix it with our grid system, content, or components to show or hide them across specific viewports.
Flexbox options
Bootstrap is built with flexbox, but not every element's displayhas been changed to display: flexas 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: flexto an element, do so with .d-flexor one of the responsive variants (eg, .d-sm-flex). You'll need this class or displayvalue to allow the use of our extra flexbox utilities for sizing, alignment, spacing, and more.
margin and padding
Use the marginand 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 1remvalue default $spacervariable. Choose values for all viewports (eg, .me-3for margin-right: 1remin LTR), or pick responsive variants to target specific viewports (eg, .me-md-3for margin-right: 1rem--in LTR- starting at the mdbreakpoint).
Togglevisibility
When toggling displayisn't needed, you can toggle the visibilityof an element with our visibility utilities . Invisible elements will still affect the layout of the page, but are visually hidden from visitors.