Memahami Sistem Grid di Bootstrap

Tips dan Trik / By /

Memahami Sistem Grid di Bootstrap – Bootstrap adalah salah satu framework CSS yang sangat populer di dunia web development. Kalau kamu sedang belajar membuat tampilan website yang rapi dan responsif, Bootstrap bisa jadi teman terbaikmu. Salah satu fitur unggulan dari Bootstrap adalah sistem grid-nya. Sistem grid ini memudahkan kamu untuk mengatur layout halaman agar terlihat rapi di berbagai ukuran layar, mulai dari desktop hingga smartphone.

Nah, di artikel ini, kita akan bahas sistem grid di Bootstrap dengan cara yang simpel dan mudah dipahami. Yuk, simak penjelasannya!

Apa Itu Sistem Grid di Bootstrap?

Sistem grid di Bootstrap adalah sistem tata letak berbasis kolom yang digunakan untuk mengatur elemen-elemen di halaman web. Sistem ini menggunakan 12 kolom sebagai dasar untuk mengatur layout. Artinya, kamu bisa membagi halaman menjadi hingga 12 bagian horizontal yang sama besar.

Misalnya, kalau kamu ingin membagi halaman menjadi dua kolom, kamu bisa menggunakan 6 kolom untuk masing-masing bagian. Atau, kalau kamu ingin tiga kolom, masing-masing bisa menggunakan 4 kolom. Sistem ini sangat fleksibel, jadi kamu bisa mengatur layout sesuai kebutuhan.

Struktur Dasar Sistem Grid

Untuk menggunakan sistem grid di Bootstrap, kamu perlu memahami tiga komponen utama: container, row, dan col.

  1. Container: Container adalah elemen utama yang digunakan untuk membungkus seluruh grid. Container ini berfungsi sebagai pembatas layout agar elemen-elemen di dalamnya tidak “keluar” dari area yang diinginkan. Bootstrap menyediakan dua jenis container:
    • .container: Memiliki lebar tetap sesuai ukuran layar.
    • .container-fluid: Memiliki lebar penuh yang mengikuti ukuran layar.
  2. Row: Row adalah baris yang digunakan untuk mengatur kolom-kolom di dalamnya. Semua kolom harus berada di dalam row.
  3. Col: Col adalah kolom yang digunakan untuk membagi baris menjadi beberapa bagian. Kamu bisa menentukan jumlah kolom yang ingin digunakan dengan menambahkan angka di belakang class col. Misalnya, col-6 berarti kolom tersebut mengambil 6 dari 12 kolom yang tersedia.

Cara Menggunakan Sistem Grid

Untuk mulai menggunakan sistem grid, kamu bisa mengikuti langkah-langkah berikut:

  1. Buat sebuah container untuk membungkus layout.
  2. Tambahkan row di dalam container.
  3. Tambahkan kolom di dalam row sesuai kebutuhan.

Berikut adalah contoh sederhana kode HTML dengan sistem grid di Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-6">Kolom 1</div>
    <div class="col-6">Kolom 2</div>
  </div>
</div>

Pada contoh di atas, halaman dibagi menjadi dua kolom yang masing-masing mengambil 6 kolom dari total 12 kolom yang tersedia.

Responsivitas dengan Breakpoints

Salah satu keunggulan sistem grid di Bootstrap adalah kemampuannya untuk membuat layout responsif. Bootstrap menggunakan breakpoints untuk mengatur tampilan berdasarkan ukuran layar. Berikut adalah breakpoints yang tersedia:

  • col-sm: Untuk layar kecil (≥576px).
  • col-md: Untuk layar sedang (≥768px).
  • col-lg: Untuk layar besar (≥992px).
  • col-xl: Untuk layar ekstra besar (≥1200px).
  • col-xxl: Untuk layar sangat besar (≥1400px).

Misalnya, kalau kamu ingin membuat layout yang berbeda untuk layar kecil dan besar, kamu bisa menulis kode seperti ini:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">Kolom 1</div>
    <div class="col-sm-12 col-md-6">Kolom 2</div>
  </div>
</div>

Pada contoh ini, setiap kolom akan mengambil seluruh lebar layar (12 kolom) pada layar kecil, tapi hanya mengambil setengah lebar layar (6 kolom) pada layar sedang dan lebih besar.

Fitur Tambahan di Sistem Grid

Selain fitur dasar, sistem grid di Bootstrap juga menyediakan beberapa fitur tambahan yang bisa kamu manfaatkan:

  1. Offset: Digunakan untuk memberi jarak kosong di sebelah kiri kolom. Misalnya, offset-md-2 akan memberi jarak 2 kolom di sebelah kiri.
  2. Order: Digunakan untuk mengatur urutan kolom. Misalnya, order-md-2 akan membuat kolom tampil di urutan kedua pada layar sedang.
  3. Alignment: Kamu bisa menggunakan class seperti align-items-center atau justify-content-between untuk mengatur posisi elemen di dalam row.

Belajar Frontend Developer

Kalau kamu ingin belajar lebih dalam tentang sistem grid di Bootstrap dan berbagai keterampilan frontend lainnya, DUMET School adalah tempat yang tepat untukmu. Di DUMET School, kamu akan diajarkan berbagai teknik dan tools untuk menjadi seorang frontend developer yang handal. Mulai dari HTML, CSS, JavaScript, hingga framework populer seperti Bootstrap, semuanya akan diajarkan secara lengkap.

Untuk informasi lebih lanjut, kamu bisa cek halaman Kursus Frontend Developer di website DUMET School. Jangan ragu untuk mulai belajar dan wujudkan impianmu menjadi developer profesional!

Related Posts

Scroll to Top