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" >w3wiki</ 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" >w3wiki</ 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/