Bootstrap 5 Horizontal & Vertical Gutters
Last Updated :
15 Dec, 2022
Horizontal & vertical Gutters in bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system.
Bootstrap 5 Horizontal & vertical Gutter Class:
- g-*: This class controls the horizontal gutter widths.
Note: (*) is used for numeric numbers like 1,2,3,4,5,6, etc.
Syntax:
<div class="row g-2">
...
</div>
Example 1: let us see an example of Horizontal & vertical gutters.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Horizontal & vertical gutters</ h3 >
< div class = "container" >
< div class = "row g-2" >
< div class = "col-4" >
< div class = "p-5 bg-primary" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 bg-secondary" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-3 bg-danger" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-2" >
< div class = "p-3 bg-warning" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-3 bg-success" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-3 bg-info" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-3 bg-secondary" >
GeeksforGeeks
</ div >
</ div >
< div class = "col-4" >
< div class = "p-3 bg-primary" >
GeeksforGeeks
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: let us see another example of Horizontal and vertical gutters.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Horizontal & vertical gutters</ h3 >
< div class = "section" >
< div class = "row g-2" >
< div class = "col-8" >
< div class="p-3 border text-info
bg-dark">
GFG
</ div >
</ div >
< div class = "col-8" >
< div class="p-3 border
text-info bg-dark">
GFG
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal–vertical-gutters
Share your thoughts in the comments
Please Login to comment...