Utilities

This chapter will discuss about Bootstrap utilities. Several utility classes are used for various changes, such as showing, hiding, aligning, and spacing content, these are used to create mobile-friendly and responsive websites.

Changing display

Bootstrap display properties can be used to configure the display. Mix it with a grid system, content, or component to display or hide them on particular viewports.

Flexbox options

• Bootstrap uses flexbox, but not every element should be to display:flex to avoid overriding and changing browser behaviors. Most of the components are built with flexbox enabled.
• In order to add display: flex to an element, use .d-flex or responsive variants (like .d-sm-flex). Use this class or value to access flexbox utilities for sizing, alignment, spacing, and more.

Margin and padding

• Use margin and padding utilities to modify the element’s spacing and sizing. It has a six-level spacing scale for spacing utilities based on 1rem default $spacer variable.
• You can select certain viewports (e.g., .me-sm-3 for margin-right: 1rem in LTR starting at the sm breakpoint), or values for the viewports (e.g., .me-3 for margin-right: 1rem in LTR).

Toggle visibility

Visibility utilities allow you to toggle an element’s visibility. Invisible elements continue to affectpage layout but are hidden from visitors.