Bootstrap 5 Horizontal & Vertical Gutters
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" > w3wiki</ 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" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-4 bg-secondary" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-3 bg-danger" > w3wiki </ div > </ div > < div class = "col-2" > < div class = "p-3 bg-warning" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-3 bg-success" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-3 bg-info" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-3 bg-secondary" > w3wiki </ div > </ div > < div class = "col-4" > < div class = "p-3 bg-primary" > w3wiki </ 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" > w3wiki</ 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 > |
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal–vertical-gutters
Contact Us