BootStrap5 Grid system Responsive classes

Last Updated : 15 Apr, 2024

Bootstrap 5 Grid System Responsive classes offer six tiers (xs, sm, md, lg, xl) to customize column sizes, enabling the creation of responsive layouts. This allows seamless adaptation to various screen sizes for optimal user experience.

Bootstrap 5 Grid system Responsive Options:

Concept	Description
All breakpoints	When you need a particularly sized column, you can use this component of responsive classes. This provides .col and .col* classes to specify a numbered class.
Stacked to horizontal	To create a basic grid system that starts out stacked and becomes horizontal, you can use the set of .col-sm-* classes.
Mix and match	Simply stack in some grid tiers to your columns. Use a combination of different classes for each tier as per the need.
Row columns	Use the row columns classes .row-cols-* to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.

Examples of BootStrap5 Grid system Responsive classes

Example 1: In this example we demonstrates Bootstrap 5's responsive grid system, with columns stacking on mobile. One column is full-width, and the other is half-width on larger screens.

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"
        />
        <script
            src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
            crossorigin="anonymous"
        ></script>
    </head>

    <body class="m-2">
        <h3>
            Bootstrap5 Grid system Responsive
            classes
        </h3>
        <div class="container">
            <!-- Stack the columns on mobile by 
            making one full-width 
            and the other half-width -->
            <div class="row">
                <div
                    class="col-md-8 border bg-primary"
                >
                    .col-md-8
                </div>
                <div
                    class="col-6 col-md-4 border bg-danger"
                >
                    .col-6 .col-md-4
                </div>
            </div>
        </div>
    </body>
</html>

Output:

ResponsiveClass — BootStrap5 Grid system Responsive classes Example Output

Example 2: In this example we are showcases Bootstrap 5's responsive grid system with different column layouts. Columns adjust based on screen size, offering flexibility in designing layouts.

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">
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 
          crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Grid system Responsive classes</h3>

    <div class="container">
        <div class="row row-cols-4">
            <div class="col border bg-danger">
                GFG
            </div>
            <div class="col border bg-primary">
                GFG
            </div>
            <div class="col border bg-warning">
                GFG
            </div>
            <div class="col border bg-secondary">
                GFG
            </div>
        </div>
    </div>
    <br><br>
    <div class="container">
        <div class="row row-cols-auto">
            <div class="col border bg-success">
                GFG
            </div>
            <div class="col border bg-secondary">
                GFG
            </div>
            <div class="col border bg-info">
                GFG
            </div>
            <div class="col border bg-danger">
                GFG
            </div>
        </div>
    </div>
    <br><br>
    <div class="container">
        <div class="row row-cols-2">
            <div class="col border bg-danger">
                GFG
            </div>
            <div class="col border bg-secondary">
                GFG
            </div>
            <div class="col border bg-primary">
                GFG
            </div>
            <div class="col border bg-info">
                GFG
            </div>
        </div>
    </div>
</body>

</html>

Output:

ResponsiveClass2 — BootStrap5 Grid system Responsive classes Example Output

BootStrap 5 Grid System All Breakpoints

ys973caiv

Improve

Article Tags :

BootStrap5 Grid system Responsive classes

Examples of BootStrap5 Grid system Responsive classes

Similar Reads

Breakepoints Layout

Containers Layout

Grid system Layout

Columns Layout

Gutters Layout

Utilities for layout

Thank You!

What kind of Experience do you want to share?