Bootstrap 5 Row Columns Gutters
Last Updated :
15 Dec, 2022
Bootstrap 5 Row columns gutters are used to create responsive space in our grid in the Bootstrap 5 framework.
Bootstrap 5 Row columns gutter Class:
- row-cols-*: This class is used to set the number of columns that best render your content and layout.
Note: * can have values like 1, 2, 3, and so on.
Syntax:
<div class="row row-cols-2">
...
</div>
Example 1: let us see an example of a row-column gutter.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Row columns gutters</ h3 >
< div class = "container" >
< div class="row row-cols-lg-5
row-cols-2
g-lg-3">
< div class = "col" >
< div class="p-3 border
bg-primary">
GFG 1
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-secondary">
GFG 2
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-success">
GFG 3
</ div >
</ div >
< div class = "col" >
< div class="p-3
border bg-danger">
GFG 4
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-warning">
GFG 5
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-info">
GFG 6
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-dark">
GFG 7
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-light">
GFG 8
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-warning">
GFG 9
</ div >
</ div >
< div class = "col" >
< div class="p-3 border
bg-danger">
GFG 10
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: let us see another example of a row-column gutter.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Row columns gutters</ h3 >
< div class = "box" >
< div class="row row-cols-2
row-cols-lg-5
g-2 g-lg-3">
< div class = "col border" >
GeekforGeeks
</ div >
< div class = "col border" >
GeekforGeeks
</ div >
< div class = "col border" >
GeekforGeeks
</ div >
< div class = "col border" >
GeekforGeeks
</ div >
< div class = "col border" >
GeekforGeeks
</ div >
< div class = "col border" >
GeekforGeeks</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks
</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks
</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks
</ div >
< div class="col-4 col-lg-2
border">
GeekforGeeks
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference:https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters
Share your thoughts in the comments
Please Login to comment...