Bootstrap 5 Vertical Gutters
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" >w3wiki</ 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" > w3wiki</ 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
Contact Us