Bootstrap 4 Grid Ekstra Kecil
Contoh Kotak Ekstra Kecil
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
Asumsikan kita memiliki tata letak sederhana dengan dua kolom. Kami ingin kolom dibagi 25%/75% untuk SEMUA perangkat.
Kami akan menambahkan kelas berikut ke dua kolom kami:
<div class="col-3">....</div>
<div class="col-9">....</div>
Contoh berikut akan menghasilkan pembagian 25%/75% di semua perangkat (ekstra kecil, kecil, sedang, besar, dan xlarge).
Contoh
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Catatan: Pastikan jumlahnya bertambah hingga 12 atau kurang (Anda tidak perlu menggunakan 12 kolom yang tersedia):
Untuk pembagian 33,3%/66,6%, Anda akan menggunakan .col-4and .col-8(dan untuk pembagian 50%/50%, Anda akan menggunakan .col-6and .col-6):
Contoh
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Kolom Tata Letak Otomatis
Di Bootstrap 4, ada cara mudah untuk membuat kolom dengan lebar yang sama untuk semua perangkat: cukup hapus nomor dari .col-*dan hanya gunakan .colkelas pada sejumlah
elemen col yang ditentukan . Bootstrap akan mengenali berapa banyak kolom yang ada, dan setiap kolom akan mendapatkan lebar yang sama:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
Bab berikutnya menunjukkan cara menambahkan persentase split yang berbeda untuk perangkat kecil.