Aquileo | Bootstrap 5 Gutters

Bootstrap 5 Gutters are used to give padding between columns, responsively space, and align content to the grid system.

How gutters works?

Using the .padding-right and .padding-left classes, we can add padding to the right and left of each column. Gutters, which are produced by horizontal padding, are spaces between the content of columns.
Gutters begin at a width of 1.5 rem (24 px).

Bootstrap 5 Gutters:

Horizontal gutters: Horizontal gutter is used for horizontal padding between columns, responsively space, and aligning content to the grid system.
Vertical gutters: Vertical gutter is used for vertical padding between columns.
Horizontal & vertical Gutters: In bootstrap 5, horizontal & vertical gutters are used to give horizontal & vertical padding between columns.
Row columns gutters: This gutter is used to create responsive space in our grid.
No gutters: No gutters remove margin and padding from rows and columns.

Example 1: Let us see an example of vertical width by using the .gy-* class.

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 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>
    </div>
</body>
</html>

Output:

Example 2: Let us see an example of horizontal width by using the .gx-* class.

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 Gutters</h3>
    <div class="container">
        <div class="g-0">
            <div class="col-4 border">GFG-1</div>
            <div class="col-4 border">GFG-2</div>
            <div class="col-4 border">GFG-3</div>
            <div class="col-4 border">GFG-4</div>
        </div>
    </div>
   
    <br><br>
    <p>
      <b>There is no margin and padding between rows</b>
    </p>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/layout/gutters/

Bootstrap 5 Gutters

Explore