ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Cara Memperkecil Space antara Column Pada Bootstrap

2/18/2020
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