Memperkecil jarak (space) antara Column dapat
menggunakan cara sederhana dengan menambahkan class row no-gutter pada HTML. Dimana
dengan memindahkan objek div yang ditampilkan ke dalam div pada class row
no-gutter.
Seperti saya ungkapkan tadi div 1 hingga 5 harus ada
pada div dengan class row no-gutter dan untuk membuat 3 kolom anda harus menamakan
class 1 hingga 2 dengan nama row col-md-4 dan untuk membuat kotak dengan
background tertentu anda harus membuat div dengan class container.
<div class="row no-gutter">
<div class="col-md-4">
<div class="container">1</div>
</div>
<div class="col-md-4">
<div class="container">2</div>
</div>
<div class="col-md-4">
<div class="container">3</div>
</div>
</div>
<div class="row no-gutter">
<div class="col-md-4">
<div class="container">4</div>
</div>
<div class="col-md-4">
<div class="container">5</div>
</div>
<div class="col-md-4">
<div class="container">6</div>
</div>
</div>
</body>
<style type="text/css">
.row.no-gutter {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom:0;
width:100%;
height:100%;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 1px;
padding-left: 1px;
padding-top: 1px;
padding-bottom:1px;
}
.container
{
text-align:center;
font-family:Arial;
font-size: 62.5%;
background-color:yellow;
width:100%;
height:200px;
border:1px solid gray;
}
</style>
Untuk membuktikan keberhasilan pengaturan space antar
kolom anda dapat mengcopy script di bawah ini dan mengatur padding pada <style> row no-gutter lalu anda save sebagai file html.
Lalu anda double klik file tersebut, tp ingat anda harus terkoneksi internet
terlebih dahulu karena js yang digunakan langsung dari situsnya.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row no-gutter">
<div class="col-md-4">
<div class="container">1</div>
</div>
<div class="col-md-4">
<div class="container">2</div>
</div>
<div class="col-md-4">
<div class="container">3</div>
</div>
</div>
<div class="row no-gutter">
<div class="col-md-4">
<div class="container">4</div>
</div>
<div class="col-md-4">
<div class="container">5</div>
</div>
<div class="col-md-4">
<div class="container">6</div>
</div>
</div>
</body>
</html>
<style type="text/css">
.row.no-gutter {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom:0;
width:100%;
height:100%;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 1px;
padding-left: 1px;
padding-top: 1px;
padding-bottom:1px;
}
.container
{
text-align:center;
font-family:Arial;
font-size: 62.5%;
background-color:yellow;
width:100%;
height:200px;
border:1px solid gray;
}
</style>
Share This :
0 Comments