Open In App

Bootstrap5 Layout Utilities

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Layout Utilities are used for creating mobile-friendly and responsive websites, there are many utility classes that can be used for various modifications such as showing, hiding, aligning, and spacing content.

  • Changing display: Bootstrap5 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 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 bootstrap5, 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 layout of the page but are hidden from display.

Example 1: let’s see an example of display utility.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
          crossorigin="anonymous">
    <title>Bootstrap5 Layout Utilities</title>
</head>
  
<body>
    <h1 class="text-success"
        GeeksforGeeks 
    </h1>
    <h3>
        Bootstrap5 Layout Utilities
    </h3>
    <br>
    <section class="d-inline p-2 bg-primary text-white">
        GFG inline element
    </section>
    <br>
    <br>
    <section class="d-block p-2 bg-dark text-white">
        GFG block element
    </section>
</body>
  
</html>


Output:

 

Example 2: let’s see an example of flexbox utility.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
          crossorigin="anonymous">
    <title>Bootstrap5 Layout Utilities</title>
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks 
    </h1>
    <h3>
        Bootstrap5 Layout Utilities
    </h3>
    <br>
    <p>
        <b>normal form of rows</b>
    </p>
    <section>
        <div class="p-2 border">
            GFG 1
        </div>
        <div class="p-2 border">
            GFG 2
        </div>
        <div class="p-2 border">
            GFG 3
        </div>
    </section>
    <br>
    <p>
        <b>When we applied display property in rows</b>
    </p>
    <section class="d-flex ">
        <div class="p-2 border">
            GFG 1
        </div>
        <div class="p-2 border">
            GFG 2
        </div>
        <div class="p-2 border">
            GFG 3
        </div>
    </section>
</body>
  
</html>


Output:

 

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



Last Updated : 05 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads