Bootstrap 4 - 02.2: Layout pada Bootstrap 4

Tutorial dasar bootstrap 4 bagian 2.2 ini akan membahas penggunaan layout grid system pada bootstrap 4. Ok mari kita mulai mempelajari Layout pada bootstrap. Grid sysrem pada bootstrap adalah komponen yang berfungsi untuk membuat pengaturan tampilan.

Cara Menggunakan Grid Pada Bootstrap 4

1. Class .col- / .col
2. Class .col-sm / .col-sm-
3. Class .col-md / .col-md-
4. Class .col-lg / .col-lg-
5. Class .col-xl / .col-xl-

Berikut ini contoh penggunaan nya:

<div class="container">
  <h1>Contoh menampilkan Grid</h1>
  <div class="row">
    <div class="col-sm satu">
      Colom 1 Grid 1
    </div>
    <div class="col-sm dua">
      Colom 1 Grid 2
    </div>
    <div class="col-sm tiga">
      Colom 1 Grid 3
    </div>    
  </div>
  <div class="w-100"></div>
  <div class="row">
    <div class="col-2 satu">
      Colom 2 Grid 1
    </div>
    <div class="col-4 dua">
      Colom 2 Grid 2
    </div>
    <div class="col-6 tiga">
      Colom 2 Grid 3
    </div>    
  </div>
  <div class="row">
    <div class="col-8 satu">
      Colom 3 Grid 1
    </div>
    <div class="col-4 dua">
      Colom 3 Grid 2
    </div>   
  </div>
  <div class="row">
    <div class="col-12 tiga">
      Colom 4 Grid 1
    </div>  
  </div>
  <div class="row">
    <div class="col-md satu">
      Colom 5 Grid 1
    </div>
    <div class="col-md tiga">
      Colom 5 Grid 2
    </div> 
  </div>   
</div>
<br><br>

agar dapat terlihat perbedaan nya saya menambahkan sedikit css

.satu {

    background-color: coral;
    border: solid grey;

}
.dua {

    background-color: lightblue;
    border: solid grey;

}
.tiga {

    background-color: yellow;
    border: solid grey;

}

    

Agar dapat terlihat lebih jelas dan kamu dapt mencoba nya sendiri berikut saya lampirkan source code dan demo nya di codepen