Sistem Grid Bootstrap 5

Sistem grid

Sistem grid Bootstrap dibangun dengan flexbox, halaman dapat mengizinkan maksimal 12 kolom.

Jika Anda tidak ingin menggunakan semua 12 kolom secara terpisah, Anda dapat menggabungkan kolom-kolom ini untuk menciptakan kolom yang lebar:

Sistem grid berresponsif, kolom akan diatur ulang otomatis berdasarkan ukuran layar.

Pastikan totalnya sama dengan atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia).

Kelas grid

Sistem grid Bootstrap 5 menyediakan enam kelas:

  • .col- (Perangkat super kecil - lebar layar kurang dari 576px)
  • .col-sm- (Perangkat kecil - lebar layar sama dengan atau lebih besar dari 576px)
  • .col-md- (Perangkat menengah - lebar layar sama dengan atau lebih besar dari 768px)
  • .col-lg- (Perangkat besar - lebar layar sama dengan atau lebih besar dari 992px)
  • .col-xl- (Perangkat ultra besar - lebar layar sama dengan atau lebih besar dari 1200px)
  • .col-xxl- (Perangkat super besar - lebar layar sama dengan atau lebih besar dari 1400px)

Gabungkan kelas di atas untuk menciptakan tata letak yang lebih dinamis dan fleksibel.

Petunjuk:Setiap kelas adalah pengukuran berdasarkan proporsi, jadi jika Anda ingin menetapkan lebar yang sama untuk sm dan md, Anda hanya perlu menentukan sm.

Struktur dasar grid Bootstrap 5

Berikut adalah struktur dasar grid Bootstrap 5:

<!-- Kendalikan lebar baris, serta cara mereka tampil di berbagai perangkat -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- atau biarkan Bootstrap mengelola layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Coba sendiri

Contoh pertama: buat baris satu (<div class = "row">）。Lalu, tambahkan jumlah baris yang dibutuhkan (dengan .col-*-* tanda (*) pertama mewakili sensi: sm, md, lg, xl atau xxl, dan tanda (*) kedua mewakili angka, total baris di setiap baris harus berjumlah 12.

Contoh kedua: bukan untuk setiap col Tambahkan angka, tetapi biarkan bootstrap menangani layout untuk membuat baris yang sama lebar: dua "col" Elemen = lebar 50% setiap baris, sementara tiga baris = lebar 33.33% setiap baris. Empat baris = 25% lebar dll. Anda juga dapat menggunakan .col-sm|md|lg|xl|xxl Buat baris ber�� sensi

Pilihan Grid

Tabel di bawah ini menyajikan bagaimana sistem grid Bootstrap 5 bekerja di berbagai ukuran layar:

Suka Kecil (<576px) Suka Besar (>=576px) Suka Besar (>=768px) Suka Besar (>=992px) Suka Besar (>=1200px) Suka Besar (>=1400px)
Awalan Klas .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Perilaku Grid Selalu horizontal Gelungkan mulai, di atas batang horizontal Gelungkan mulai, di atas batang horizontal Gelungkan mulai, di atas batang horizontal Gelungkan mulai, di atas batang horizontal Gelungkan mulai, di atas batang horizontal
Lebar Container Tidak ada (auto) 540px 720px 960px 1140px 1320px
Diperkenalkan untuk Mode Tegak Ponsel Mode Latar Belakang Ponsel Tablet Laptop Laptop dan Desktop Laptop dan Desktop
Nomor Baris 12 12 12 12 12 12
Lebar Gutter 1.5rem (dalam setiap sisi baris .75rem) 1.5rem (dalam setiap sisi baris .75rem) 1.5rem (dalam setiap sisi baris .75rem) 1.5rem (dalam setiap sisi baris .75rem) 1.5rem (dalam setiap sisi baris .75rem) 1.5rem (dalam setiap sisi baris .75rem)
Boleh ditambahkan Ya Ya Ya Ya Ya Ya
Pemindahan Ya Ya Ya Ya Ya Ya
Pengurutan Baris Ya Ya Ya Ya Ya Ya