Bayangkan Anda sedang menata buku di rak. Anda tidak meletakkannya begitu saja; Anda mengelompokkannya dalam baris dan kolom agar terlihat rapi dan mudah diakses. Dalam dunia web desain, Bootstrap Grid System adalah rak buku Anda. Ini adalah fondasi utama untuk membangun tata letak (layout) halaman web yang responsif dan terstruktur. 🏗️
Grid System adalah sebuah kerangka kerja tata letak yang dibangun menggunakan flexbox dan memungkinkan Anda menyusun konten ke dalam barisan dan kolom. Tujuan utamanya adalah untuk menciptakan halaman yang terlihat bagus di semua ukuran layar, mulai dari ponsel kecil hingga monitor desktop besar.
Kunci utamanya adalah sistem 12 kolom. Anggap saja setiap baris horizontal di halaman Anda memiliki 12 “slot” imajiner yang bisa Anda isi dengan konten.
## Tiga Komponen Utama Grid
Untuk menggunakan Grid System, Anda hanya perlu memahami tiga komponen utamanya: Container, Row, dan Column.
1. Container (.container atau .container-fluid)
Ini adalah pembungkus paling luar dari tata letak Anda. Fungsinya adalah untuk menampung, memberi padding, dan menengahkan konten Anda.
Ada dua jenis container:
- .container: Memiliki lebar tetap (
max-width) yang berubah pada setiap ukuran layar (breakpoint). Ini akan membuat konten Anda memiliki margin di sisi kiri dan kanan pada layar besar (tidak memenuhi layar). - .container-fluid: Memiliki lebar 100% (
width: 100%) di semua ukuran layar. Ini akan membuat konten Anda selalu memenuhi seluruh lebar layar.
2. Row (.row)
Row berfungsi sebagai pembungkus horizontal untuk kolom. Anggap ini sebagai satu “baris” di rak buku Anda. Kolom harus selalu menjadi turunan langsung dari sebuah .row agar dapat berfungsi dengan baik dan menghilangkan padding negatif dari container.
3. Column (.col-*)
Ini adalah unit dasar tempat Anda meletakkan konten. Anda dapat menentukan berapa banyak dari 12 slot yang tersedia yang akan ditempati oleh sebuah kolom pada ukuran layar tertentu.
Struktur kelasnya adalah .col-{breakpoint}-{jumlah}:
- breakpoint: Ukuran layar target. Jika tidak ditentukan, berlaku untuk semua ukuran layar.
sm(small): Untuk ponsel (≥576px)md(medium): Untuk tablet (≥768px)lg(large): Untuk laptop/desktop (≥992px)xl(extra large): Untuk desktop besar (≥1200px)
- jumlah: Jumlah slot kolom yang ingin digunakan (dari 1 hingga 12).
## Contoh Praktis
Mari kita buat tata letak dua kolom sederhana: satu untuk konten utama dan satu untuk sidebar.
- Di layar desktop (
mdke atas), kita ingin konten utama memakan 8 slot dan sidebar 4 slot (8 + 4 = 12). - Di layar ponsel (
sm), kita ingin keduanya menumpuk secara vertikal (lebar penuh).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Contoh Grid Bootstrap</title>
<style>
/* Style tambahan hanya untuk visualisasi */
[class^="col"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
Konten Utama
<p>Pada layar medium ke atas, bagian ini akan memakan 8 dari 12 kolom.</p>
</div>
<div class="col-md-4">
Sidebar
<p>Bagian ini akan memakan sisa 4 kolom.</p>
</div>
</div>
</div>
</body>
</html>
Bagaimana cara kerjanya?
- Di Layar Desktop/Tablet (≥768px) 💻: Bootstrap akan menerapkan kelas
.col-md-8dan.col-md-4, sehingga konten akan tampil berdampingan. - Di Layar Ponsel (<768px) 📱: Aturan
mdtidak berlaku, sehingga setiap<div>akan kembali ke perilaku defaultblock, yaitu menumpuk secara vertikal dan memenuhi lebar yang tersedia. Inilah inti dari desain responsif!
## Mengapa 12 Kolom?
Angka 12 dipilih karena sangat fleksibel. Angka ini bisa dibagi habis oleh 2, 3, 4, dan 6. Ini memudahkan kita untuk membuat tata letak umum seperti:
- Dua kolom (6+6)
- Tiga kolom (4+4+4)
- Empat kolom (3+3+3+3)
- Kombinasi lain seperti (8+4) atau (9+3)
Kesimpulan
Bootstrap Grid System mungkin terlihat rumit pada awalnya, tetapi dengan memahami tiga komponen utamanya—Container, Row, dan Column—Anda sudah memegang kunci untuk membangun hampir semua jenis tata letak web yang responsif. Dengan berlatih, Anda akan dapat membuat halaman yang terstruktur dan tampak hebat di perangkat apa pun.
