Bootstrap 5 Vertical Gutters

Last Updated : 15 Dec, 2022

Vertical gutters: Vertical gutter is used for padding between columns, responsively space, and aligning content to the grid system.

Bootstrap 5 Vertical Gutter Class:

  • gy-*: This class is used to control the vertical widths of gutters.

Note: (*)  is used for numeric numbers like 1,2,3,4,.. etc.

Syntax:

<div class="gy-3">
    ...
</div>

Note: Add a wrapper around .row with the .overflow-hidden class.

Example 1: Let us see an example of 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 Vertical Gutters</h3>

    <div class="section overflow-hidden">
        <div class="gy-5">
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
        </div>
    </div>
    <br>
    <b>the row is align vertical the help of vertical gutter class</b>
</body>

</html>

Output:

 

Example 2: Let us see another example of 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>
    <h1 class="text-success"> GeeksforGeeks</h1>
    <h3>Bootstrap5 Vertical Gutters</h3>

    <div class="section overflow-hidden">
        <div class="row gy-5">

            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-6">
                <div class="border">GFG</div>
            </div>
            <div class="col-8">
                <div class="border">GFG</div>
            </div>
            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-2">
                <div class="border">GFG</div>
            </div>
            <div class="col-2">
                <div class="border">GFG</div>
            </div>
            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-6">
                <div class="border">GFG</div>
            </div>
            <div class="col-4">
                <div class="border">GFG</div>
            </div>
            <div class="col-10">
                <div class="border">GFG</div>
            </div>
        </div>
    </div>
    <br>
    <b>vertical align with .row class</b>  
</body>
</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters

Comment

Explore