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>
    <!-- Bootstrap CDN-->
    <link rel="stylesheet"
         href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
         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>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          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

Comment

Explore