Bootstrap 5 No Gutters

Last Updated : 15 Dec, 2022

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= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        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= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        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>