Panduan Layout Grid Bootstrap 4

Sistem Grid pada Bootstrap dibuat dengan menggunakan Flexbox dan kita dapat membuat hingga 12 kolom pada seluruh halaman Web. Jika kalian tidak ingin menggunakan kolom  ke-12 satu per satu, kalian dapat membuat Group kolom untuk membuat kolom yang lebih luas.

Sistem Grid sangatlah Responsive dan kolom tersebut akan ter-Arrange (Teratur) secara otomatis tergantung pada ukuran layar.

Perlu kalian pastikan bahwa jumlahnya bisa bertambah hingga 12 atau kurang (Kalian tidak perlu menggunakan semua kolom yang tersedia).

Class Grid pada Bootstrap

Terdapat lima Class pada Grid System Bootstrap 4 antara lain:

• .col- (Perangkat yang sangat kecil/Extra Small - lebar layar kurang dari 576px)
• .col-sm- (Perangkat yang kecil/Small - lebar layar sama dengan atau lebih besar dari 576px)
• .col-md- (Perangkat yang sedang/Medium - lebar layar sama dengan atau lebih besar dari 768px)
• .col-lg- (Perangkat yang besar/Large - lebar layar sama dengan atau lebih besar dari 992px)
• .col-xl- (Perangkat yang sangat besar/Extra Large - lebar layar sama dengan atau lebih besar dari 1200px)

Beberapa Class di atas dapat dikombinasikan untuk membuat Layout yang lebih dinamis dan fleksibel.

Tips: Setiap Class dapat ditingkatkan, jadi jika ingin ingin mengatur lebar yang sama untuk sm (Small) dan md (Medium), kalian hanya perlu menentukan lebar dari sm (Small).

Struktur Grid Dasar Bootstrap 4

Berikut adalah struktur dasar Grid pada Bootstrap 4:

<!-- Mengontrol lebar kolom dan bagaimana dapat ditampilkan pada perangkat yang berbeda -->
<div class="row">
  <div class="col-#-#"></div>
  <div class="col-#-#"></div>
</div>
<div class="row">
  <div class="col-#-#"></div>
  <div class="col-#-#"></div>
  <div class="col-#-#"></div>
</div>

<!-- Atau membiarkan Bootstrap mengendalikan Layout secara otomatis -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Contoh pertama:
Buat sebuah Row (<div class = "row">). Kemudian, tambahkan jumlah kolom yang kalian inginkan (Tag dengan Class .col-#-# yang sesuai).
Tanda pagar pertama (#) mewakili Responsive: sm (Small), md (Medium), lg (Large), atau xl (Extra Large), sedangkan tanda pagar kedua (#) mewakili angka/nilai yang dapat kita tentukan sampai dengan angka 12 untuk setiap Row.

Contoh kedua:
Selain menambahkan angka/nilai ke setiap col, kita juga dapat membiarkan Bootstrap mengendalikan Layout.
Untuk membuat kolom dengan lebar yang sama: Tambahkan dua elemen "col" = lebar 50% untuk setiap col nya. Tiga col = lebar 33,33% untuk setiap col nya. Empat col = lebar 25% untuk setiap col nya, dst. Kalian juga dapat menggunakan .col-sm, .col-md, .col-lg, .col-xl untuk membuat kolom yang Responsive.

Disini, saya telah mengumpulkan beberapa contoh dasar Grid Layout pada Bootstrap 4.

Membuat Tiga Kolom Sama Lebar pada Bootsrap 4

Berikut adalah contoh cara membuat tiga kolom sama lebar pada semua ukuran layar perangkat:

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div> 

Membuat Kolom Responsive pada Bootstrap 4

Contoh berikut dapat menunjukkan cara membuat empat kolom dengan lebar yang sama mulai dari ukuran layar Tablet dan melebar ke layar Desktop yang Luas. Pada Smartphone atau pada layar dengan lebar kurang dari 576px, kolom-kolom tersebut akan saling bertumpuk secara otomatis. Berikut adalah contohnya:

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div> 

Membuat Kolom Responsive Tidak Sama Lebar pada Bootstrap 4

Contoh berikut dapat menunjukkan cara mendapatkan dua kolom yang lebarnya dimulai dari ukuran layar tablet hingga desktop:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div> 

Tips: Kalian akan mempelajari tentang Grid di Bootsrap 4 pada bagian yang akan datang. Terimakasih.