Bootstrap 5 Layout Gutters
Gutters are the gaps between the columns in bootstrap’s grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below:
Bootstrap5 Layout Gutter Modifier Classes:
- g-*: This class is used to set the width of the gutter.
- gx-*: This class is used to set the width of the gutter in the horizontal direction.
- gy-*: This class is used to set the width of the gutter in the vertical direction.
* can range from 0-5
Syntax:
<div class="container">
<div class="row g-3">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>
Example 1: In this example, we used the horizontal gutter classes to change the spacing between the bootstrap’s grid columns.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Layout Gutters</ strong >
</ div >
< div class = "container text-center" >
< div class = "row gx-5" >
< div class = "col-6" >
< div class = "p-4 border bg-danger" >
Column 1
</ div >
</ div >
< div class = "col-6" >
< div class = "p-4 border bg-success" >
Column 2
</ div >
</ div >
</ div >
< div class = "row gx-2" >
< div class = "col-4" >
< div class = "p-4 border bg-info" >
Column 1
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 border text-bg-dark" >
Column 2
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 border bg-warning" >
Column 3
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Layout Gutters
Example 2: In this example, we use the gutter modifier class which sets both horizontal and vertical gutter.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Layout Gutters</ strong >
</ div >
< div class = "container text-center" >
< div class = "row g-3" >
< div class = "col-6" >
< div class = "p-4 border bg-danger" >
Column 1
</ div >
</ div >
< div class = "col-6" >
< div class = "p-4 border bg-success" >
Column 2
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 border bg-info" >
Column 1
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 border text-bg-dark" >
Column 2
</ div >
</ div >
< div class = "col-4" >
< div class = "p-4 border bg-warning" >
Column 3
</ div >
</ div >
< div class = "col-6" >
< div class = "p-4 border text-bg-secondary" >
Column 1
</ div >
</ div >
< div class = "col-6" >
< div class = "p-4 border bg-primary" >
Column 2
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Layout Gutters
Reference: https://getbootstrap.com/docs/5.2/forms/layout/#gutters
Last Updated :
09 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...