Sistem Grid Bootstrap

Sistem Grid Bootstrap dapat di buat sampai 12 kolom dalam satu page.

Jika anda tidak ingin menggunakan 12 kolom, anda dapat mengelompokan kolom bersama:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Sistem Grid Bootstrap adalah responsive, dan kolom akan menyesuaikan secara otomatis berdasarkan ukuran layar.

Grid Class

Sistem Grid Bootstrap memiliki empat class:

  • xs (untuk phones – screens less than 768px wide)
  • sm (untuk tablets – screens equal to or greater than 768px wide)
  • md (untuk laptop kecil – screens equal to or greater than 992px wide)
  • lg (untuk laptop dan desktop – screens equal to or greater than 1200px wide)

Class di atas dapat dikombinasikan untuk menciptakan tata letak yang lebih dinamis dan fleksibel.

Struktur Dasar Grid Bootstrap

Berikut ini adalah struktur dasar kisi Bootstrap:

<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>
<div class="row">
  ...
</div>

Pertama; buat baris (<div class="row">). kemudian, tambahkan jumlah kolom yang diinginkan (.col-*-*). Catatan: Nomor dalam .col-*-* harus selalu sampai 12 kolom.

Di bawah ini kami telah mengumpulkan beberapa contoh layout grid Bootstrap dasar.

Tiga Kolom yang Sama

.col-sm-4
.col-sm-4
.col-sm-4

Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar yang sama mulai dari tablet dan penskalaan ke desktop besar. Pada ponsel atau layar yang lebarnya kurang dari 768px, kolom akan secara otomatis ditumpuk:

Example

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

 

Dua Kolom Tidak Sama

.col-sm-4
.col-sm-8

Contoh berikut menunjukkan cara mendapatkan dua kolom lebar-lebar mulai dari tablet dan penskalaan ke desktop besar:

Example

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

 

Tip: Anda akan mempelajari lebih lanjut tentang grid Bootstrap nanti dalam tutorial ini.

Artikel Lainnya:


Di tulis oleh: