Bootstrap - 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 affect page layout but are hidden from visitors.

Kickstart Your Career

Get certified by completing the course

Get Started