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.
<!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:
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.
<!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>
Output:
Reference: https://getbootstrap.com/docs/5.1/layout/grid/#stacked-to-horizontal