How to remove gutter space for a specific div in Bootstrap ?

Last Updated : 28 Nov, 2019

To remove gutter space for a specific div, first we must know what is gutter space. In Bootstrap 4, There are 12 columns in the grid system each column has a small space in between that space is known as gutter space. Gutter Space has width 30px (15px on each side of a column). The Following Approach will explain clearly.

Approach:

By default, Bootstrap 4 has class=”no-gutters” to remove gutter spaces of any specific div. The following image shows the highlighted gutter space and space between columns on bootstrap 4 12 column grid system. You can even modify gutter width by reducing 15px width of gutter space between each columns.

Example 1: Below example illustrate how to remove gutter space for a specific div.

Output:

Example 2: Below example illustrate how to remove gutter space for a specific div only.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="container"> 
            <h1 style="color:green;padding:13px;"> 
              GeeksforGeeeks 
            </h1> 
            <br> 
  
            <div class="container"> 
              
                <div class= "row no-gutters"> 
                    <div class= "col-6 col-sm-3 bg-info"> 
                        .col-6 .col-sm-3 
                    </div> 
                    <div class= "col-6 col-sm-3 bg-danger"> 
                        .col-6 .col-sm-3 
                    </div> 
                    <b><em>Without Gutter space</em></b> 
                </div> 
                  
                <div class="row "> 
                    <div class= "col-6 col-sm-3 bg-warning"> 
                        .col-6 .col-sm-3  
                    </div> 
                    <div class= "col-6 col-sm-3 bg-success"> 
                        .col-6 .col-sm-3  
                    </div> 
                    <b><em>With Gutter space</em></b> 
                </div> 
                  
                <div class= "row no-gutters"> 
                    <div class= "col-4 col-sm-2 bg-success"> 
                        .col-4 .col-sm-2  
                    </div> 
                    <div class= "col-4 col-sm-2 bg-danger "> 
                        .col-4 .col-sm-2  
                    </div> 
                    <div class= "col-4 col-sm-2 bg-info"> 
                        .col-4 .col-sm-2 
                    </div> 
                    <b><em>Without Gutter space</em></b> 
                </div> 
                  
                <div class= "row "> 
                    <div class= "col-4 col-sm-2 bg-danger"> 
                        .col-4 .col-sm-2  
                    </div> 
                    <div class= "col-4 col-sm-2 bg-info"> 
                        .col-4 .col-sm-2  
                    </div> 
                    <div class= "col-4 col-sm-2 bg-warning"> 
                        .col-4 .col-sm-2 
                    </div> 
                    <b><em>With Gutter space</em></b> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html> 