Bootstrap 5 Utilities

Last Updated : 22 Dec, 2022

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        crossorigin="anonymous">   
</head>

<body class="m-2">
    <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 us see an example of display utility.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body class="m-2">
    <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>