Posted By
Bajarangi soft ,
Posted On 12-10-2020
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>
<!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>