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>
<link rel="stylesheet"
href=
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>
<link rel="stylesheet"
href=
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...