BootStrap 5 Utilities Changing Display

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 Changing Display 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.

BootStrap 5 Utilities Changing Display Class: There is no predefined class for this, but you need to have knowledge of Bootstrap 5 Display Utilities.

Example 1: The following example shows the changing display utilities of Bootstrap5.

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="container">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Utilities Changing display</h3>
    <br>
    <div class="container">
        <div class="d-inline p-2 bg-danger border">
            GFG display inline
        </div>
        <div class="d-inline p-2 bg-info">
            GFG display inline</div>
        <div class="d-inline p-2 bg-primary">
            GFG display inline</div>
        <div class="d-inline p-2 bg-secondary">
            GFG display inline</div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use Display utility classes.

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="container">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Utilities Changing display</h3>
    <br>
    <div class="container">
        <div class="d-block p-2 col-8 
            bg-danger border">
            GeeksforGeeks display block
        </div>
        <div class="d-block p-2 col-8 bg-info">
            GeeksforGeeks display block
        </div>
        <div class="d-block p-2 col-8 bg-primary">
            GeeksforGeeks display block
        </div>
        <div class="d-block p-2 col-8 bg-secondary">
            GeeksforGeeks display block
        </div>
    </div>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.2/layout/utilities/#changing-display

BootStrap 5 Utilities Changing Display

Explore