Bootstrap 5 Gutters
Last Updated :
15 Dec, 2022
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>
<link rel="stylesheet"
href=
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:
Bootstrap 5 Gutters
Example 2: Let us see an example of horizontal width by using the .gx-* class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
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:
Bootstrap 5 Gutters
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/
Share your thoughts in the comments
Please Login to comment...