How To Remove Gutter Space For Specifier Div In Bootstrap

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

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.

Remove Gutter Space For Specifier Div

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:#e54e27;padding:13px;">
        BAJARANGI SOFT
        </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-danger ">
                .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-danger ">
                .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>
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:#e3224f;padding:13px;">
            BAJARANGI SOFT
        </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>

Related Post