Kisi Bootstrap
Sistem Grid Bootstrap
Sistem grid Bootstrap memungkinkan hingga 12 kolom di seluruh halaman.
Jika Anda tidak ingin menggunakan 12 kolom satu per satu, Anda dapat mengelompokkan kolom bersama-sama untuk membuat kolom yang lebih lebar:
| rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 |
| rentang 4 | rentang 4 | rentang 4 | |||||||||
| rentang 4 | rentang 8 | ||||||||||
| rentang 6 | rentang 6 | ||||||||||
| rentang 12 | |||||||||||
Sistem grid Bootstrap responsif, dan kolom akan diatur ulang secara otomatis tergantung pada ukuran layar.
Kelas Grid
Sistem grid Bootstrap memiliki empat kelas:
xs(untuk ponsel - lebar layar kurang dari 768px)sm(untuk tablet - layar sama dengan atau lebih besar dari lebar 768px)md(untuk laptop kecil - layar sama dengan atau lebih besar dari lebar 992px)lg(untuk laptop dan desktop - layar sama dengan atau lebih besar dari lebar 1200px)
Kelas-kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Struktur Dasar dari Grid Bootstrap
Berikut ini adalah struktur dasar dari grid 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; membuat baris ( <div
class="row">). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan
.col-*-*kelas yang sesuai). Perhatikan bahwa angka di dalam .col-*-*harus selalu berjumlah 12 untuk setiap baris.
Di bawah ini kami telah mengumpulkan beberapa contoh tata letak grid Bootstrap dasar.
Tiga Kolom Sama
Contoh berikut menunjukkan cara mendapatkan tiga kolom dengan lebar yang sama mulai dari tablet dan menskalakan ke desktop besar. Pada ponsel atau layar dengan lebar kurang dari 768 piksel, kolom akan ditumpuk secara otomatis:
Contoh
<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
Contoh berikut menunjukkan cara mendapatkan dua kolom dengan lebar berbeda mulai dari tablet dan menskalakan ke desktop besar:
Contoh
<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.