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

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.
<!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="row p-3">                <h2><em>With Gutter space</em></h2>            </div>            <div class="row border border-dark ">                <div class="col-12 col-sm-6 col-md-8 bg-primary ">                    .col-12 .col-sm-6 .col-md-8                </div>                <div class="col-6 col-md-4 bg-secondary">                    .col-6 .col-md-4                </div>            </div>              <div class="row p-3">                <h2><em>Without Gutter space</em></h2>            </div>            <div class="row no-gutters border border-dark">                <div class="col-12 col-sm-6 col-md-8 bg-primary ">                    .col-12 .col-sm-6 .col-md-8                </div>                <div class="col-6 col-md-4 bg-secondary">                    .col-6 .col-md-4                </div>            </div>        </div>    </center></body>  </html>
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>
Output:
Reference: https://getbootstrap.com/docs/4.3/layout/grid/#no-gutters
Bootstrap-4
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.