Dalam dunia pengembangan web modern, tampilan yang responsif adalah suatu keharusan. Pengguna mengakses website dari berbagai perangkat — mulai dari smartphone, tablet, hingga layar monitor besar. Agar tampilan tetap rapi di semua ukuran layar, web developer membutuhkan sistem tata letak (layout system) yang fleksibel. Di sinilah Grid System dari Bootstrap 5 berperan penting. Framework ini menyediakan sistem grid berbasis Flexbox yang sangat kuat dan mudah digunakan untuk membuat layout responsif tanpa harus menulis banyak CSS manual. Artikel ini akan menjadi panduan lengkap tentang struktur Grid System di Bootstrap 5, mulai dari konsep dasar, cara kerja, hingga contoh implementasi praktisnya.
Apa Itu Grid System di Bootstrap 5?
Grid System adalah sistem tata letak berbasis kolom yang digunakan Bootstrap untuk menyusun dan mengatur elemen pada halaman web.
Sistem ini membagi lebar halaman menjadi 12 kolom fleksibel, yang bisa disusun sesuai kebutuhan. Setiap baris (row) berisi satu atau lebih kolom (column), dan kombinasi dari kolom-kolom tersebut harus berjumlah maksimal 12 unit dalam satu baris.
Contoh sederhananya:
<div class="row"> <div class="col-6">Kolom 1</div> <div class="col-6">Kolom 2</div> </div>
Kode di atas akan menghasilkan dua kolom dengan lebar yang sama, masing-masing 6 dari total 12 kolom.
Konsep Dasar Grid di Bootstrap 5
Bootstrap 5 menggunakan tiga elemen utama dalam sistem grid-nya, yaitu:
-
Container
-
Row
-
Column
Mari kita bahas satu per satu.
1. Container
Container adalah elemen pembungkus utama yang menampung seluruh row dan column. Fungsinya untuk memberikan batasan lebar pada konten agar tampilan tetap rapi dan terpusat.
Bootstrap menyediakan tiga jenis container:
-
.container→ Memiliki lebar tetap sesuai breakpoint. -
.container-fluid→ Lebarnya 100% di semua ukuran layar. -
.container-{breakpoint}→ Misalnya.container-md, akan menjadi lebar tetap mulai dari ukuran medium ke atas.
Contoh:
<div class="container">
<div class="row">
<div class="col">Konten di dalam container</div>
</div>
</div>
2. Row
Class .row digunakan untuk mengelompokkan kolom dan menghapus jarak horizontal bawaan dari container. Setiap row harus berisi satu atau beberapa kolom.
<div class="row"> <div class="col">Kolom 1</div> <div class="col">Kolom 2</div> </div>
3. Column
Class .col adalah inti dari sistem grid. Bootstrap secara otomatis membagi kolom dengan ukuran yang sama jika tidak diberi angka.
Namun, kamu juga bisa menentukan lebar kolom secara manual menggunakan .col-1 sampai .col-12.
Contoh:
<div class="row"> <div class="col-4">Kolom 1</div> <div class="col-8">Kolom 2</div> </div>
Breakpoints dalam Grid System
Salah satu kekuatan utama Bootstrap 5 adalah dukungan breakpoints responsif, yang memungkinkan layout berubah sesuai ukuran layar.
Bootstrap menggunakan enam breakpoint utama:
| Breakpoint | Class Prefix | Ukuran Minimum (px) |
|---|---|---|
| Extra small | .col- |
< 576px |
| Small | .col-sm- |
≥ 576px |
| Medium | .col-md- |
≥ 768px |
| Large | .col-lg- |
≥ 992px |
| Extra large | .col-xl- |
≥ 1200px |
| XXL | .col-xxl- |
≥ 1400px |
Dengan memanfaatkan prefix ini, kamu bisa mengatur tampilan kolom agar berubah di berbagai ukuran layar.
Contoh:
<div class="row"> <div class="col-12 col-md-6 col-lg-4">Kolom Responsif</div> <div class="col-12 col-md-6 col-lg-8">Kolom Responsif</div> </div>
-
Di layar kecil: kedua kolom memenuhi lebar 100% (stack ke bawah).
-
Di layar menengah: masing-masing mengambil setengah lebar.
-
Di layar besar: kolom pertama 4/12, kolom kedua 8/12.
Auto Layout Columns
Jika kamu tidak menentukan ukuran kolom, Bootstrap akan secara otomatis membagi ruang yang tersedia secara merata.
Contoh:
<div class="row"> <div class="col">Satu</div> <div class="col">Dua</div> <div class="col">Tiga</div> </div>
Ketiga kolom di atas akan memiliki lebar yang sama tanpa perlu menentukan ukuran spesifik.
Mengatur Kolom Offset (Jarak ke Samping)
Terkadang, kamu mungkin ingin memberikan jarak di sebelah kiri kolom agar posisinya tidak terlalu mepet. Bootstrap menyediakan class .offset-* untuk tujuan ini.
Contoh:
<div class="row"> <div class="col-4 offset-2">Kolom dengan offset</div> </div>
Kolom di atas akan dimulai setelah dua kolom kosong di sebelah kiri.
Mengatur Penempatan Kolom (Alignment)
Bootstrap 5 menggunakan Flexbox, sehingga kamu bisa mengatur posisi kolom secara vertikal dan horizontal dengan mudah menggunakan class seperti:
-
.justify-content-start -
.justify-content-center -
.justify-content-end -
.align-items-start -
.align-items-center -
.align-items-end
Contoh:
<div class="row justify-content-center align-items-center" style="height: 200px;"> <div class="col-4">Tengah</div> </div>
Kode di atas akan membuat kolom berada tepat di tengah secara horizontal dan vertikal.
Nested Columns (Kolom di Dalam Kolom)
Bootstrap juga mendukung nested grid, yaitu grid di dalam kolom lain.
Cukup tambahkan .row baru di dalam .col untuk membuat struktur bersarang.
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">Subkolom 1</div>
<div class="col-6">Subkolom 2</div>
</div>
</div>
<div class="col-4">Kolom Utama</div>
</div>
Teknik ini sangat berguna untuk membuat layout kompleks seperti dashboard atau halaman e-commerce.
Contoh Layout Responsif Lengkap
Berikut contoh layout responsif tiga kolom menggunakan Bootstrap 5:
<div class="container">
<div class="row">
<div class="col-12 col-md-4">Sidebar Kiri</div>
<div class="col-12 col-md-8">Konten Utama</div>
</div>
</div>
Penjelasan:
-
Di layar kecil, kedua kolom ditampilkan vertikal (satu di atas satu).
-
Di layar menengah ke atas, layout berubah menjadi dua kolom sejajar.
Tips Mengoptimalkan Grid Bootstrap
-
Gunakan kombinasi class responsif (
col-sm,col-md,col-lg) agar layout adaptif di semua perangkat. -
Gunakan
.container-fluiduntuk desain full width. -
Manfaatkan Flexbox utilities untuk kontrol posisi yang lebih fleksibel.
-
Kurangi penggunaan offset berlebihan agar layout tetap seimbang.
-
Selalu uji tampilan di berbagai ukuran layar menggunakan fitur “Responsive Design Mode” di browser developer tools.
Kesimpulan
Grid System di Bootstrap 5 adalah fondasi utama untuk membangun tampilan web yang fleksibel, terstruktur, dan responsif.
Dengan memahami cara kerja container, row, dan kolom, kamu bisa membuat layout kompleks dengan mudah tanpa perlu menulis CSS dari nol.
Selain itu, kombinasi dengan breakpoints responsif dan utilitas Flexbox menjadikan Bootstrap 5 sebagai alat yang sangat kuat untuk pengembangan web modern.
Apakah kamu seorang pemula atau developer berpengalaman, menguasai struktur Grid System Bootstrap 5 akan sangat membantu dalam menciptakan website yang profesional, cepat, dan mudah disesuaikan di berbagai perangkat.