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>