Contoh kisi bootstrap

Tata letak grid dasar untuk membuat Anda terbiasa membangun dalam sistem grid Bootstrap.

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
.col-md-4
.col-md-4

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-6
.col-md-4

Campuran: seluler dan desktop

Sistem grid Bootstrap 3 memiliki empat tingkatan kelas: xs (ponsel), sm (tablet), md (desktop), dan lg (desktop yang lebih 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 xs dan sm, Anda hanya perlu menentukan xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Campuran: seluler, tablet, dan desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Pembersihan kolom

Hapus float pada breakpoint tertentu untuk mencegah pembungkus yang canggung dengan konten yang tidak rata.

.col-xs-6 .col-sm-3
Ubah ukuran area pandang Anda atau lihat di ponsel Anda sebagai contoh.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, dan pull reset

Atur ulang offset, push, dan pull pada breakpoint tertentu.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0