Bootstrap 4 Grid Ditumpuk-ke-horizontal
Bootstrap 4 Contoh Grid: Ditumpuk-ke-horizontal
Kami akan membuat sistem grid dasar yang mulai ditumpuk pada perangkat ekstra kecil, sebelum menjadi horizontal pada perangkat yang lebih besar.
Contoh berikut menunjukkan tata letak dua kolom "bertumpuk-ke-horizontal" sederhana, yang berarti akan menghasilkan pembagian 50%/50% di semua layar, kecuali untuk layar ekstra kecil, yang akan ditumpuk secara otomatis (100%):
Contoh: Ditumpuk-ke-horizontal
<div class="container">
<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>
Tip: Angka-angka di .col-sm-*kelas menunjukkan berapa banyak kolom yang harus direntang div (dari 12). Jadi, .col-sm-1rentang 1 kolom, .col-sm-4rentang 4 kolom,
.col-sm-6rentang 6 kolom, dll.
Catatan:
Pastikan jumlahnya berjumlah 12 atau kurang (Anda tidak perlu menggunakan semua 12 kolom yang tersedia):
Tip: Anda dapat mengubah tata letak lebar tetap menjadi tata letak lebar penuh dengan mengubah .containerkelas menjadi .container-fluid:
Contoh: Wadah cairan
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<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 dan hanya gunakan kelas pada sejumlah
elemen col yang ditentukan . Bootstrap akan mengenali berapa banyak kolom yang ada, dan setiap kolom akan mendapatkan lebar yang sama. Kelas ukuran menentukan kapan kolom harus responsif:.col-size-*.col-size
<!-- 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>