BootStrap 5 Grid System Stacked to Horizontal

Last Updated : 16 Jan, 2023

Bootstrap 5 Grid System is a way to create layouts that are responsive and highly customizable. Grids can be arranged in a lot of different ways from which stacked vertically and placed horizontally beside each other are the most basic ones. We can use the responsive classes in a way that the classes are stacked initially and when the viewport size exceeds the size given in the grid class, the grid gets placed beside each other.

Bootstrap 5 Grid system Stacked to horizontal Class:

col-[sm/md/lg/xl]-[1-9]: This class is added to the columns of the grid to make it horizontal when the viewport reaches the screen size given in the class.

Syntax:

<div class="row">
    <div class="col-[sm/md/lg/xl]-[1-9]">
        ...
    </div>
    ...
</div>

Example 1: The code below demonstrates how we can make the Stacked to Horizontal to work with the Grid responsive classes where the elements of the grid are text-only cards.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=         
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
           integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
           crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Grid system Stacked to horizontal
    </h4>
    <div class="container mt-4 p-4">
        <div class="row">
            <div class="col-md-3">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="card-body">
                        <p class="card-text">
                             A data structure is a storage that
                             is used to store and organize data.
                        </p>
                    </div>
                </div>
           </div>
            <div class="col-md-3">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="card-body">
                        <p class="card-text">
                            Therefore Algorithm refers to a sequence 
                            of finite steps to solve a particular problem.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="card-body">
                        <p class="card-text">
                            C++ is a general-purpose programming language and
                            is widely used nowadays for competitive programming.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3" style="max-width:540px;">
                    <div class="card-body">
                        <p class="card-text">
                            Java is one of the most popular and 
                            widely used programming languages.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>   
</body>
</html>

Output:

BootStarp5 Grid System Stacked to Horizontal

BootStrap5 Grid System Stacked to Horizontal

Example 2: The code below demonstrates how the Stacked to Horizontal Grid works inside a modal with the Grid responsive classes where the grid changes when the viewport changes to lg.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">GeeksforGeeks</h1>
    <h4 class="ms-4">
        Bootstrap 5 Grid system Stacked to horizontal
    </h4>
    <div class="container">
        <button type="button" class="btn btn-success mt-4"
            data-bs-toggle="modal" data-bs-target="#cardModal">
          Launch Modal to show grid
        </button>
        <div class="modal fade" id="cardModal" tabindex="-1"
            aria-labelledby="cardModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="cardModalLabel">
                            This Modal Contains a Grid
                        </h5>
                        <button type="button" class="btn-close"
                            data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container mt-4 p-4">
                            <div class="row text-light mb-3">
                                <div class="col-lg-7 bg-success border">
                                    col-sm-7
                                </div>
                                <div class="col-lg-5 bg-success border">
                                    col-sm-5
                                </div>
                            </div>
                            <div class="row text-light">
                                <div class="col-lg-6 bg-secondary border">
                                    col-sm-6
                                </div>
                                <div class="col-lg-6 bg-secondary border">
                                    col-sm-6
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>        
</body>
</html>