Sistem Grid Bootstrap 5

Kamu pernah membuka web di laptop dengan tampilannya rapi, tapi ketika kamu buka di hp atau smartphone semuanya berantakan? Bootstrap hadir untuk mengatasi masalah itu tanpa harus memikirkan media query.

Bootstrap merupakan framework CSS open-source yang dikembangkan oleh tim Twitter yang sekarang adalah X. Konsep utamanya adalah mobile-first: desain dimulai dari layar terkecil, lalu disesuaikan untuk layar yang lebih besar.

Apa Itu Sistem Grid?

Bayangkan editor majalah cetak. Mereka tidak menempelkan foto dan teks sembarangan. Mereka memakai kolom-kolom tersembunyi agar konten terlihat terstruktur. Sistem Grid Bootstrap bekerja seperti itu, tapi di dunia digital dan jauh lebih fleksibel.

Sistem grid Bootstrap membagi setiap baris menjadi 12 kolom yang bisa dikombinasikan sesuka hati. Angka 12 dipilih karena mudah dibagi: bisa dibagi 2, 3, 4, dan 6.

Hierarki Dasar: Container, Row, Column

Sebelum menulis mulai koding, pahami dulu hierarki ini:

Container  ←  "Bingkai Foto"
  └── Row  ←  "Rak Buku"
        └── Column  ←  "Kotak di Rak"

Ketiga komponen ini tidak bisa dipisahkan dan tidak boleh ditukar urutannya.

Container

Container adalah komponen paling luar. Fungsinya membatasi lebar konten dan menengahkannya secara horizontal. Tanpa container, konten akan melebar hingga pinggir layar.

Pada Bootstrap 5 menyediakan 3 jenis container:

1. Fixed Container (`.container`)

Lebar maksimumnya berubah sesuai breakpoint. Di layar kecil lebih sempit, di layar besar lebih lebar, tapi selalu ada batasnya atau max width nya.

<div class="container">
  <p>Konten ini dibungkus container tetap (fixed).</p>
</div>

Berikut lebar maksimum .container di setiap breakpoint:

Breakpoint	Class Prefix	Dimensi Layar	Lebar Container
Extra small	(default)	< 576px	100%
Small	`sm`	≥ 576px	540px
Medium	`md`	≥ 768px	720px
Large	`lg`	≥ 992px	960px
Extra large	`xl`	≥ 1200px	1140px
Extra extra large	`xxl`	≥ 1400px	1320px

2. Fluid Container (`.container-fluid`)

Selalu memenuhi 100% lebar layar, tidak peduli ukurannya. Cocok untuk hero banner atau navigasi full-width.

<div class="container-fluid">
  <p>Konten ini selalu penuh sesuai lebar layar.</p>
</div>

3. Responsive Container (`.container-{breakpoint}`)

Berperilaku fluid hingga breakpoint tertentu, lalu berubah menjadi fixed.

<!-- Fluid di bawah 768px, fixed di atas 768px -->
<div class="container-md">
  <p>Saya fluid di mobile, fixed di tablet ke atas.</p>
</div>

Row

Row adalah komponen kedua dalam hierarki, yang ditempatkan langsung di dalam container. Fungsinya menjadi pembungkus bagi kolom-kolom dan mengelola jarak antar kolom menggunakan sistem gutter.

.row menggunakan CSS Flexbox dibelakang layar. Semua kolom di dalam row akan otomatis berbaris secara horizontal.

<div class="container">
  <div class="row">
    <!-- Kolom-kolom di sini -->
  </div>

  <div class="row">
    <!-- Kolom-kolom lainnya -->
  </div>
</div>

Mengatur Jarak Antar Kolom (Gutters)

Bootstrap 5 memperkenalkan sistem gutter dengan class g-, gx- (horizontal), dan gy- (vertikal). Nilainya mulai dari 0 sampai dengan 5.

<div class="container">
  <!-- g-3: memberi jarak 1rem di semua sisi antar kolom -->
  <div class="row g-3">
    <div class="col-6">Kolom 1</div>
    <div class="col-6">Kolom 2</div>
  </div>

  <!-- gx-5 gy-2: jarak horizontal lebih besar dari vertikal -->
  <div class="row gx-5 gy-2">
    <div class="col-4">Kolom A</div>
    <div class="col-4">Kolom B</div>
    <div class="col-4">Kolom C</div>
  </div>
</div>

<!-- Salah: kolom langsung di dalam container -->
<div class="container">
  <div class="col-6">Ini salah!</div>
</div>

<!-- Benar: kolom di dalam row, row di dalam container -->
<div class="container">
  <div class="row">
    <div class="col-6">Ini benar!</div>
  </div>
</div>

Column

Column adalah komponen terdalam. Di sinilah konten kamu ditempatkan. Setiap row punya 12 slot yang bisa dibagi-bagi di antara kolom yang ada.

Anggap row-mu seperti pizza dengan 12 irisan. Kamu bebas membaginya:

2 teman: masing-masing dapat 6 irisan (col-6)
3 teman: masing-masing dapat 4 irisan (col-4)
Kombinasi: 1 teman dapat 8, sisanya dapat 4 (col-8 + col-4)

Aturan utamanya: jumlah nilai kolom dalam satu row tidak boleh melebihi 12.

Sistem 12 Kolom Secara Visual

Contoh Kode

<div class="container">
  <!-- Satu kolom penuh -->
  <div class="row">
    <div class="col-12">Satu kolom penuh</div>
  </div>

  <!-- Dua kolom seimbang -->
  <div class="row">
    <div class="col-6">Kolom kiri</div>
    <div class="col-6">Kolom kanan</div>
  </div>

  <!-- Tiga kolom seimbang -->
  <div class="row">
    <div class="col-4">~33%</div>
    <div class="col-4">~33%</div>
    <div class="col-4">~33%</div>
  </div>

  <!-- Sidebar + Konten utama -->
  <div class="row">
    <div class="col-8">Konten Utama (~67%)</div>
    <div class="col-4">Sidebar (~33%)</div>
  </div>
</div>

Responsivitas

Dengan menambahkan prefix breakpoint pada class kolom, kamu bisa mengatur tampilan yang berbeda untuk ukuran layar yang berbeda, tanpa menulis satu baris CSS pun.

Tabel Breakpoint Bootstrap 5

Breakpoint	Class Prefix	Berlaku Pada
Extra small	`col-`	< 576px
Small	`col-sm-`	≥ 576px
Medium	`col-md-`	≥ 768px
Large	`col-lg-`	≥ 992px
Extra large	`col-xl-`	≥ 1200px
Extra extra large	`col-xxl-`	≥ 1400px

Cara Membaca Class Responsif

Bootstrap menggunakan prinsip mobile-first: breakpoint bekerja dari bawah ke atas. Artinya, col-md-6 berarti: "Jadilah 6 kolom pada layar 768px ke atas. Di bawah itu, jadilah lebar penuh."

Contoh Responsif

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
      <!--
        Ponsel (< 576px)  : lebar penuh
        Tablet (≥ 768px)  : dua kolom berdampingan
        Laptop (≥ 992px)  : tiga kolom berdampingan
      -->
      <div class="card p-3">Kartu 1</div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card p-3">Kartu 2</div>
    </div>

    <div class="col-12 col-md-12 col-lg-4">
      <!--
        Ponsel  : lebar penuh
        Tablet  : lebar penuh (satu baris sendiri)
        Laptop  : berdampingan dengan dua kartu lain
      -->
      <div class="card p-3">Kartu 3</div>
    </div>
  </div>
</div>

Contoh Layout Blog Responsif

<div class="container my-5">
  <div class="row g-4">
    <!-- Konten utama: penuh di mobile, 8 kolom di laptop -->
    <main class="col-12 col-lg-8">
      <article>
        <h1>Judul Artikel Blog</h1>
        <p>Isi artikel...</p>
      </article>
    </main>

    <!-- Sidebar: di bawah artikel di mobile, di samping di laptop -->
    <aside class="col-12 col-lg-4">
      <div class="card p-3">
        <h5>Widget</h5>
        <ul>
          <li>Artikel Terpopuler</li>
          <li>Kategori</li>
        </ul>
      </div>
    </aside>
  </div>
</div>

Tips dan Contoh Kesalahan

Yang Perlu Dilakukan

1. Urutkan breakpoint dari kecil ke besar.

<div class="col-12 col-md-6 col-lg-4">...</div>

2. Gunakan col tanpa angka untuk pembagian otomatis.

<div class="row">
  <div class="col">Otomatis 1/3</div>
  <div class="col">Otomatis 1/3</div>
  <div class="col">Otomatis 1/3</div>
</div>

3. Gunakan order- untuk mengubah urutan visual tanpa mengubah HTML.

<div class="row">
  <div class="col-12 col-md-8 order-md-2">Konten Utama</div>
  <div class="col-12 col-md-4 order-md-1">Sidebar</div>
</div>

4. Gunakan d-none dan d-md-block untuk menyembunyikan elemen per breakpoint.

<div class="d-none d-md-block">
  Hanya terlihat di layar lebih dari atau sama dengan 768px
</div>

5. Gunakan nesting untuk layout yang lebih kompleks.

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-6">Sub-kolom kiri</div>
        <div class="col-6">Sub-kolom kanan</div>
      </div>
    </div>
    <div class="col-4">Sidebar</div>
  </div>
</div>

Yang Harus Dihindari

#	Kesalahan	Dampak	Solusi
1	Kolom langsung di dalam container tanpa row	Layout rusak, padding tidak konsisten	Selalu gunakan row sebagai perantara
2	Total kolom dalam satu row melebihi 12	Kolom turun ke baris baru secara tidak terduga	Pastikan total = 12, atau gunakan `col` otomatis
3	Lupa tag `meta viewport` di `<head>`	Breakpoint tidak berfungsi di mobile	Tambahkan `<meta name="viewport" ...>`
4	Menambahkan margin/padding langsung ke col	Merusak sistem gutter bawaan Bootstrap	Gunakan class `g-`, `gx-`, `gy-`
5	Memakai syntax Bootstrap 4 di Bootstrap 5	Class tidak dikenali, layout tidak bekerja	Perhatikan perubahannya, misal: `ml-auto` berubah menjadi `ms-auto`

Sistem Grid Bootstrap 5

On this page