Contoh kisi bootstrap

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.

Lima tingkatan grid

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.

.kol-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tiga kolom yang sama

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.

.col-md-4

Alternatif tiga kolom yang sama

Dengan menggunakan .row-cols-*kelas, Anda dapat dengan mudah membuat kisi dengan kolom yang sama.

.colanak dari .row-cols-md-3

Tiga kolom yang tidak sama

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.

.col-md-3

.col-md-6

.col-md-3

Dua kolom

Dapatkan dua kolom mulai dari desktop dan penskalaan ke desktop besar .

.col-md-8

.col-md-4

Lebar penuh, kolom tunggal

Tidak ada kelas kisi yang diperlukan untuk elemen lebar penuh.

Dua kolom dengan dua kolom bersarang

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.

.col-md-8

.col-md-6

.col-md-4

Campuran: seluler dan desktop

Sistem grid Bootstrap v5 memiliki enam tingkatan kelas: xs (ekstra kecil, infiks kelas ini tidak digunakan), sm (kecil), md (sedang), lg (besar), xl (x-besar), dan xxl (xx -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 menyetel lebar yang sama untuk md, lg, xl, dan xxl, Anda hanya perlu menentukan md.

.col-md-8

.col-6 .col-md-4

.kol-6

Campuran: seluler, tablet, dan desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Talang

Dengan .gx-*kelas, talang horizontal dapat disesuaikan.

.coldengan .gx-4selokan

Gunakan .gy-*kelas untuk mengontrol talang vertikal.

.coldengan .gy-4selokan

Dengan .g-*kelas, talang di kedua arah dapat disesuaikan.

.coldengan .g-3selokan

Wadah

Kelas tambahan yang ditambahkan di Bootstrap v4.4 memungkinkan wadah yang lebarnya 100% hingga breakpoint tertentu. v5 menambahkan xxlbreakpoint baru.

.wadah

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid