Bootstrap 4 Grid Kecil
Contoh Kotak 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 perangkat kecil.
Perangkat kecil didefinisikan memiliki lebar layar dari 576 piksel hingga 767 piksel .
Untuk perangkat kecil kami akan menggunakan .col-sm-*kelas.
Kami akan menambahkan kelas berikut ke dua kolom kami:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Sekarang Bootstrap akan mengatakan "pada ukuran kecil, cari kelas dengan -sm- di dalamnya dan gunakan itu".
Contoh berikut akan menghasilkan pembagian 25%/75% pada perangkat kecil (dan sedang, besar, dan xbesar). Pada perangkat ekstra kecil, itu akan secara otomatis menumpuk (100%):
Contoh
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-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-sm-4and .col-sm-8(dan untuk pembagian 50%/50%, Anda akan menggunakan .col-sm-6and .col-sm-6):
Contoh
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-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-sm-*dan hanya gunakan .col-smkelas pada sejumlah
elemen col yang ditentukan . Bootstrap akan mengenali berapa banyak kolom yang ada, dan setiap kolom akan mendapatkan lebar yang sama.
Jika ukuran layar kurang dari 576px , kolom akan ditumpuk secara horizontal:
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>
Bab berikutnya menunjukkan cara menambahkan persentase pisah yang berbeda untuk perangkat sedang.