Open In App

Bootstrap 5 Layout Gutters

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads