Bootstrap 4 Grid
Bootstrap 4 Sistem Grid
Sistem grid Bootstrap dibangun dengan flexbox dan 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 responsif, dan kolom akan diatur ulang secara otomatis tergantung pada ukuran layar.
Pastikan jumlahnya bertambah hingga 12 atau kurang (Anda tidak perlu menggunakan semua 12 kolom yang tersedia).
Kelas Grid
Sistem grid Bootstrap 4 memiliki lima kelas:
.col-(perangkat ekstra kecil - lebar layar kurang dari 576px).col-sm-(perangkat kecil - lebar layar sama dengan atau lebih besar dari 576 piksel).col-md-(perangkat menengah - lebar layar sama dengan atau lebih besar dari 768px).col-lg-(perangkat besar - lebar layar sama dengan atau lebih besar dari 992px).col-xl-(perangkat xlarge - lebar layar sama dengan atau lebih besar dari 1200px)
Kelas-kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Tip: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk
smdan md, Anda hanya perlu menentukan sm.
Struktur Dasar dari Bootstrap 4 Grid
Berikut ini adalah struktur dasar dari grid Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Contoh pertama: buat baris ( <div
class="row">). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan
.col-*-*kelas yang sesuai). Bintang pertama (*) mewakili daya tanggap: sm, md, lg atau xl, sedangkan bintang kedua mewakili angka, yang seharusnya berjumlah 12 untuk setiap baris.
Contoh kedua: alih-alih menambahkan angka ke masing-masing col, biarkan bootstrap menangani tata letak, untuk membuat kolom dengan lebar yang sama: dua "col"elemen = lebar 50% untuk setiap kolom. tiga col = lebar 33,33% untuk setiap col. empat cols = 25% lebar, dll. Anda juga dapat menggunakan .col-sm|md|lg|xluntuk membuat kolom responsif.
Di bawah ini kami telah mengumpulkan beberapa contoh tata letak grid Bootstrap 4 dasar.
Tiga Kolom Sama
Contoh berikut menunjukkan cara membuat tiga kolom dengan lebar yang sama, di semua perangkat dan lebar layar:
Contoh
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Kolom Responsif
Contoh berikut menunjukkan cara membuat empat kolom dengan lebar yang sama mulai dari tablet dan menskalakan ke desktop ekstra besar. Pada ponsel atau layar dengan lebar kurang dari 576px, kolom akan secara otomatis bertumpuk satu sama lain :
Contoh
<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>
Dua Kolom Responsif yang Tidak Sama
Contoh berikut menunjukkan cara mendapatkan dua kolom dengan lebar berbeda mulai dari tablet dan menskalakan ke desktop ekstra 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 Bootstrap 4 grid nanti dalam tutorial ini.