Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Sistem Grid merupakan salah satu fitur paling penting dalam Bootstrap yang digunakan untuk mengatur layout atau tata letak halaman website. Dengan menggunakan Grid System, developer dapat membagi halaman website menjadi beberapa kolom sehingga tampilan website menjadi lebih terstruktur, rapi, dan mudah diatur.
Bootstrap menggunakan sistem 12 kolom grid yang fleksibel dan responsive, sehingga layout website dapat menyesuaikan berbagai ukuran layar seperti desktop, tablet, dan smartphone.
Grid System adalah sistem layout yang digunakan untuk membagi halaman website menjadi beberapa kolom secara horizontal sehingga memudahkan pengaturan posisi elemen pada halaman.
Dalam Bootstrap, Grid System bekerja dengan struktur berikut:
Container└── Row└── Column
Penjelasan struktur:
Container → pembungkus utama layout
Row → baris yang menampung kolom
Column → kolom tempat konten berada
Dengan menggunakan sistem ini, developer dapat mengatur posisi konten dengan lebih fleksibel.
Container adalah elemen pembungkus utama yang digunakan untuk menampung layout website.
Bootstrap menyediakan dua jenis container:
Container dengan lebar tetap (fixed width) yang menyesuaikan ukuran layar.
Contoh penggunaan:
<div class="container">Konten website</div>Container dengan lebar penuh (full width) yang mengikuti lebar layar browser.
Contoh penggunaan:
<div class="container-fluid">Konten full layar</div>
Biasanya digunakan untuk layout yang ingin memenuhi seluruh layar.
Row digunakan untuk membuat baris dalam layout grid. Row berfungsi untuk mengelompokkan beberapa kolom dalam satu baris.
Contoh penggunaan row:
<div class="container"><div class="row">Konten dalam baris</div></div>
Row biasanya digunakan untuk menampung beberapa kolom sekaligus.
Column digunakan untuk membagi ruang dalam baris menjadi beberapa bagian.
Column merupakan tempat untuk menampilkan konten seperti:
teks
gambar
form
card
button
Contoh penggunaan column:
<div class="row"><div class="col">Kolom 1</div><div class="col">Kolom 2</div></div>
Bootstrap secara otomatis membagi ruang menjadi kolom yang sama besar.
Bootstrap menggunakan sistem 12 kolom dalam satu baris.
Artinya satu baris dapat dibagi menjadi maksimal 12 bagian.
Contoh pembagian kolom:
| Layout | Penjelasan |
|---|---|
| col-12 | 1 kolom penuh |
| col-6 | 2 kolom |
| col-4 | 3 kolom |
| col-3 | 4 kolom |
Contoh kode:
<div class="row"><div class="col-6">Kolom kiri</div><div class="col-6">Kolom kanan</div></div>
Layout di atas menghasilkan 2 kolom dengan ukuran sama besar.
Contoh lain:
<div class="row"><div class="col-4">Kolom 1</div><div class="col-4">Kolom 2</div><div class="col-4">Kolom 3</div></div>
Layout di atas menghasilkan 3 kolom dengan ukuran sama besar.
Berikut contoh membuat layout website sederhana menggunakan Grid System Bootstrap.
Contoh layout 3 bagian:
Sidebar
Konten utama
Sidebar kanan
Contoh kode:
<div class="container"><div class="row"><div class="col-3">Sidebar kiri</div><div class="col-6">Konten utama</div><div class="col-3">Sidebar kanan</div></div></div>
Penjelasan:
3 + 6 + 3 = 12 kolom
Layout tetap seimbang dalam satu baris
Layout ini sering digunakan pada:
website berita
dashboard
blog
Nested Grid adalah teknik membuat grid di dalam kolom grid lainnya.
Hal ini digunakan ketika developer ingin membuat layout yang lebih kompleks.
Contoh nested grid:
<div class="container"><div class="row"><div class="col-6"><div class="row"><div class="col-6">Nested Kolom 1</div><div class="col-6">Nested Kolom 2</div></div></div><div class="col-6">Kolom utama</div></div></div>
Pada contoh di atas:
Kolom pertama dibagi lagi menjadi dua kolom kecil
Kolom kedua tetap sebagai satu kolom
Nested grid sangat berguna untuk membuat layout seperti:
dashboard admin
galeri produk
halaman landing page
Grid System Bootstrap adalah sistem layout yang digunakan untuk mengatur struktur halaman website menggunakan konsep container, row, dan column. Dengan sistem 12 kolom, developer dapat membuat berbagai jenis layout yang fleksibel dan responsive untuk berbagai ukuran layar perangkat. Grid System menjadi fondasi utama dalam pembuatan desain website menggunakan Bootstrap.