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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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