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