Bootstrap Grid - Ditumpuk-ke-horizontal
Contoh Grid Bootstrap: 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%):
col-sm-6
col-sm-6
Contoh: Ditumpuk-ke-horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<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-1bentang 1 kolom, .col-sm-4bentang 4 kolom,
.col-sm-6bentang 6 kolom, dst.
Catatan: Pastikan jumlahnya selalu berjumlah 12!
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">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>