Tata letak grid dasar untuk membuat Anda terbiasa membangun dalam sistem grid Bootstrap.
Dalam contoh ini, .themed-grid-colkelas ditambahkan ke kolom untuk menambahkan beberapa tema. Ini bukan kelas yang tersedia di Bootstrap secara default.
Ada lima tingkatan pada sistem grid Bootstrap, satu untuk setiap rentang perangkat yang kami dukung. Setiap tingkatan dimulai pada ukuran viewport minimum dan secara otomatis berlaku untuk perangkat yang lebih besar kecuali diganti.
Dapatkan tiga kolom dengan lebar yang sama mulai dari desktop dan penskalaan ke desktop besar . Pada perangkat seluler, tablet, dan di bawahnya, kolom akan ditumpuk secara otomatis.
Dapatkan tiga kolom mulai dari desktop dan penskalaan ke desktop besar dengan berbagai lebar. Ingat, kolom kisi harus berjumlah hingga dua belas untuk satu blok horizontal. Lebih dari itu, dan kolom mulai menumpuk terlepas dari viewport.
Dapatkan dua kolom mulai dari desktop dan penskalaan ke desktop besar .
Tidak ada kelas kisi yang diperlukan untuk elemen lebar penuh.
Menurut dokumentasi, bersarang itu mudah—cukup letakkan baris kolom di dalam kolom yang ada. Ini memberi Anda dua kolom mulai dari desktop dan menskalakan ke desktop besar , dengan dua lainnya (lebar yang sama) di dalam kolom yang lebih besar.
Pada ukuran perangkat seluler, tablet dan yang lebih rendah, kolom ini dan kolom bertingkatnya akan ditumpuk.
Sistem grid Bootstrap v4 memiliki lima tingkatan kelas: xs (ekstra kecil, infiks kelas ini tidak digunakan), sm (kecil), md (sedang), lg (besar), dan xl (ekstra besar). Anda dapat menggunakan hampir semua kombinasi kelas ini untuk membuat tata letak yang lebih dinamis dan fleksibel.
Setiap tingkat kelas ditingkatkan, artinya jika Anda berencana untuk mengatur lebar yang sama untuk md, lg dan xl, Anda hanya perlu menentukan md.
Kelas tambahan yang ditambahkan di Bootstrap v4.4 memungkinkan wadah yang lebarnya 100% hingga breakpoint tertentu.