VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstarp-5-utilities/

⇱ Bootstrap 5 Utilities - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Utilities

Last Updated : 23 Jul, 2025

Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content.

Bootstrap 5 utilities for layout:

  • Changing display: Bootstrap 5 provides some display properties for setting the display. Some display properties like set to display responsive and display toggling, etc. It can be mixed with a grid system, content, or component for a responsive output.
  • Flexbox options: The Flexible Box Layout Module in bootstrap5 is used for designing the flexible and responsive layout structure. Most of the components are made with flexbox enabled.
  • Margin and padding: In Bootstrap 5, we use the margin and padding (spacing) utility to set the space and size of an element. It includes a six-level scale for spacing utilities, based on a 1rem value. We can choose values for viewports or choose specific viewports.
  • Toggle visibility: Bootstrap 5 regulates element visibility without changing display content. Invisible elements still affect the page layout but are hidden from display.

Example 1: Let us see an example.

Output:

👁 Image
 

Example 2: Let us see an example of display utility.

Output:

👁 Image
 

Reference: https://getbootstrap.com/docs/5.0/layout/utilities/

Comment

Explore