Sistem Grid Bootstrap 5

Sistem grid

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

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

Sistem grid responsif, kolom akan berubah posisi 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 ekstra 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 ekstra besar - lebar layar sama dengan atau lebih besar dari 1200px)
  • .col-xxl- (Perangkat besar - lebar layar sama dengan atau lebih besar dari 1400px)

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

Petunjuk:Setiap kelas diperbesar proporsional, jadi jika Anda ingin menetapkan lebar yang sama untuk sm dan md, cukup tentukan sm.

Struktur grid dasar Bootstrap 5

Berikut adalah struktur grid dasar Bootstrap 5:

/* Kendalikan lebar kolom, 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 mengatur layout secara otomatis */
<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">). kemudian, tambahkan jumlah kolom yang dibutuhkan (dengan .col-*-* tanda bintang (*) merepresentasikan responsivitas: sm, md, lg, xl, atau xxl, dan tanda bintang kedua merepresentasikan angka, total per baris seharusnya adalah 12.

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

Pilihan Grid

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

Super Kecil (<576px) Kecil (>=576px) Sedang (>=768px) Besar (>=992px) Super Besar (>=1200px) Ekstra Besar (>=1400px)
Prefiks Klas .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Tipe Grid Selalu horizontal Mulai bergulir, horizontal di atas batas Mulai bergulir, horizontal di atas batas Mulai bergulir, horizontal di atas batas Mulai bergulir, horizontal di atas batas Mulai bergulir, horizontal di atas batas
Lebar Kontainer None (auto) 540px 720px 960px 1140px 1320px
Berasal dari Layar Vertikal Ponsel Layar Horizontal Ponsel Tablet Laptop Laptop dan Desktop Laptop dan Desktop
Nomor Kolom 12 12 12 12 12 12
Lebar Gutter 1.5rem (dalam setiap sisi kolom .75rem) 1.5rem (dalam setiap sisi kolom .75rem) 1.5rem (dalam setiap sisi kolom .75rem) 1.5rem (dalam setiap sisi kolom .75rem) 1.5rem (dalam setiap sisi kolom .75rem) 1.5rem (dalam setiap sisi kolom .75rem)
Dapat disalurkan Ya Ya Ya Ya Ya Ya
Offset Ya Ya Ya Ya Ya Ya
Pengurutan Kolom Ya Ya Ya Ya Ya Ya