Bootstrap 5 No gutters remove margin and padding from .row and columns.
Bootstrap 5 No gutter Class:
- g-0: This class is used to remove the gutter between our columns and rows.
Syntax:
<div class="g-0">
...
</div>Example 1: let us see an example of no gutters.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href=
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap5 No 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 class="col-4 border">GFG-4</div>
<div class="col-4 border">GFG-6</div>
</div>
</div>
<br><br>
<p><b> There is no margin and padding between rows</b></p>
</body>
</html>
|
Output:
Example 2: Let us see another example of no gutters.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href=
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap5 No Gutters</h3>
<div class="container">
<div class="row 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 class="col-4 border">GFG-5</div>
<div class="col-4 border">GFG-6</div>
<div class="col-4 border">GFG-7</div>
<div class="col-4 border">GFG-8</div>
<div class="col-4 border">GFG-9</div>
<div class="col-4 border">GFG-10</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/#no-gutters