Bootstrap 5 Layout Gutters

Last Updated : 09 Dec, 2022

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        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:

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        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>