Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout
Bagian terpenting yang harus dipahami pada Bootstrap adalah sistem grid.
Saya yakin, jika kamu memahami sistem grid.. kamu akan bisa membuat layout web dengan mudah dan bagaimanapun bentuknya.
Pada tutorial ini..
Kita akan belajar tentang pengertian sistem grid,
class-class untuk membuat sistem grid,
dan latihan menggunakan sistem grid untuk membuat beberapa macam layout web.
Sudah siap?
Mari kita mulai..
Apa itu Sistem Grid di Bootstrap?
Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint.
Satu kolom penuh panjangnya adalah 12. Jika kolom dibagi dua maka panjangnya akan menjadi 6.
Jika dibagi lagi, maka panjang kolomnya akan semakin kecil, hingga yang paling kecil adalah 1. Ini artinya, kolom pada grid hanya bisa dibagi sampai 12 saja.
Selain untuk menentukan tata letak, Grid juga berfungsi sebagai guide line bagi desainer. Sehingga nanti akan membuat desain lebih mudah diterapkan ke dalam kode.
Memahami Breakpoint
Breakpoint adalah ukuran lebar yang menentukan tampilan responsif terhadap ukuran viewport perangkat tertentu. 1
Saat ini Bootstrap memiliki 6 ukuran Breakpoint, yakni none
, sm
, md
, lg
, xl
, dan xxl
.
Perhatikan gambar berikut.
Ini adalah ukuran breakpoint sesuai dengan ukuran layar perangkat.
Ingat!
Bootstrap adalah framework yang menggunakan pendekatan mobile first, jadi kita harus memikirkan tampilan di mobile terlebih dahulu sebelum membuat tampilan untuk desktop.
Karena itu, nilai default breakpoint adalah none
. Ukuran ini adalah ukuran yang paling kecil, yakni sekitar 576px.
Contoh:
<div class="col-12">
<!-- ukuran kolom ini 12 -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>
Pada contoh tersebut, kita memberikan ukuran kolom 12
dan 6
tanpa menggunakan breakpoint.
Artinya:
Ukuran kolom tersebut akan tetap 12
dan 6
di semua ukuran layar.
Gimana kalau kita ingin mengubah, misalnya menjadi 8
pada layar komputer dan tetap 12
pada layar HP.
Gampang!
Tinggal berikan breakpoint.
<div class="col-12 col-lg-8">
<!-- ukuran kolom ini 12 pada layar hp -->
<!-- ukuran kolom ini 8 pada layar komputer -->
</div>
<div class="col-6">
<!-- ukuran kolom ini 6 -->
</div>
Nah, sekarang ukurannya akan menjadi 8 di layar komputer.
Gimana sudah paham?
Kalau gitu, lanjut kita bahas container..
Class Container
Container adalah fondasi dasar dari blok layout. Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar.
Container juga memiliki breakpoint.
Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika kita menggunakan class container-md
maka lebar kontainer akan 100% pada layar Extra Small dan Small.
Mari kita coba dalam contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Container</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container bg-info text-white">
<h1>Contoh Container</h1>
</div>
</header>
</body>
</html>
Hasilnya:
Jika class container
dihapus, maka hasilnya:
Blok header tidak menggunakan container
, sekilas terlihat seperti menggunakan class container-fluid
.
Namun, sebenarnya berbeda.
Berikut ini tampilan blok header yang menggunakan class container-fluid
.
Class container-fluid
adalah class kontainer yang ukurannya 100% di semua ukruan layar.
Nah, setelah kita mengetahui blok dasar dari layout yakni container
, berikutnya kita akan pelajari class row
dan col
.
Class row
dan col
Class row
dan col
merupakan class untuk membuat baris dan kolom. Kedua class ini lah yang kita gunakan untuk membuat grid.
Class row
berfungsi untuk membuat baris. Class ini menggunakan flex
, namun breakpoint tidak berlaku untuk class ini.
Contoh penggunaan:
<div class="row">
</div>
Class col
berfungsi untuk membuat kolom. Class ini harus dibungkus oleh class row
agar menjadi grid.
Class col
memiliki ukuran dan breakpoint. Ukuran paling panjang adalah 12, dan ukuran paling pendek adalah 1.
Format penulisannya:
col-[breakpoint]-[ukuran]
Contoh penggunaan:
<div class="row">
<div class="col">
<!-- kolom 1 -->
</div>
<div class="col">
<!-- kolom 2 -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- kolom 1 -->
</div>
</div>
Class Gutter
Gutter adalah jarak antar kolom. Class Gutter ditulis bersamaan dengan class row
.
Format penulisannya menggunakan huruf g
.
g-[breakpoint]-[ukuran]
gx-[breakpoint]-[ukuran]
gy-[breakpoint]-[ukuran]
Gutter punya ukuran mulai dari 0
sampai 5
.
Class gx
adalah Gutter untuk horizontal, sedangkan gy
adalah Gutter untuk vertikal. Jika hanya menggunakan g
saja, maka artinya gutter untuk horizontal dan vertikal.
Contoh:
<div class="row g-2">
<div class="col">
<!-- kolom 1 -->
</div>
<div class="col">
<!-- kolom 2 -->
</div>
</div>
Artinya, kita akan memberikan jarak Gutter untuk kolom sebesar 2
.
Contoh lagi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Gutter</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row g-0">
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
<div class="col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature" alt="gambar alam">
</div>
</div>
</div>
</body>
</html>
Pada contoh ini, kita memberikan nilai gutter 0
, artinya tidak ada jarak antar kolom.
Hasilnya:
Sekarang coba ubah g-0
menjadi g-5
untuk memberikan jarak sebesar 5
.
Maka hasilnya:
Latihan: Layout 1 Kolom
Pada latihan ini, kita akan membuat layout 1 kolom dan ada tiga komponen penting yang ada di dalam kolom tersebut, yakni Header, Artikel, dan Footer.
Kurang lebih desainnya seperti ini:
Mari kita buat dengan Bootstrap.
Buatlah satu file dengan nama latihan-1-kolom.html
, kemudian isi dengan kode berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Layout 1 Kolom</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header class="container bg-primary text-white">
<div class="row">
<div class="col-12 py-4 text-center">
<h1 class="display-1">Tutorial Bootstrap</h1>
<p class="lead">Panduan Belajar Bootstrap untuk Pemula</p>
</div>
</div>
</header>
<main class="container border">
<div class="row">
<div class="col-12 py-5">
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus
sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione
ipsam facere quod?</p>
</div>
</div>
</main>
<footer class="container bg-light">
<div class="row">
<div class="col-12 py-4">
© 2021 Tutorial Bootstrap
</div>
</div>
</footer>
</body>
</html>
Hasilnya:
Latihan: Layout 2 Kolom
Pada laithan kedua ini, kita akan membagi elemen artikel menjadi dua kolom.
Kolom pertama untuk artikel dan kolom kedua untuk menampilkan informasi lain seperti widget, iklan, dll.
Pada tampilan mobile, kita ingin layout dua kolom ini ditampilkan dalam satu kolom, sedangkan pada desktop tetap ditampilkan dua kolom.
Kira-kira desainnya seperti ini:
Baiklah..
Mari kita coba buat dengan Bootstrap.
Buatlah file baru dengan nama latihan-2-kolom.html
, kemudian isi dengan kode berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Layout 1 Kolom</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header class="container bg-primary text-white">
<div class="row">
<div class="col-12 py-4 text-center">
<h1 class="display-1">Tutorial Bootstrap</h1>
<p class="lead">Panduan Belajar Bootstrap untuk Pemula</p>
</div>
</div>
</header>
<main class="container border">
<div class="row">
<div class="col-md-8 py-5">
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
<div class="col-md-4 py-5">
<img class="w-100" src="https://placeimg.com/250/250/nature" alt="gambar alam">
</div>
</div>
</main>
<footer class="container bg-primary text-white">
<div class="row">
<div class="col-12 py-4">
© 2021 Tutorial Bootstrap
</div>
</div>
</footer>
</body>
</html>
Hasilnya:
Latihan: Layout 3 Kolom
Pada latihan ke-3 ini, kita akan membuat tiga kolom untuk tampilan di komputer dan satu kolom di HP.
Berikut ini rancangan desainnya:
Baiklah mari kita buat dalam bootstrap..
Buatlah file baru dengan nama contoh-3-kolom.html
, kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Layout 1 Kolom</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header class="container bg-primary text-white">
<div class="row">
<div class="col-12 py-4 text-center">
<h1 class="display-1">Tutorial Bootstrap</h1>
<p class="lead">Panduan Belajar Bootstrap untuk Pemula</p>
</div>
</div>
</header>
<main class="container border">
<div class="row">
<div class="col-md-3">
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
<div class="col-md-6">
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
<div class="col-md-3">
<h1>Membuat Layout Satu Kolom</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad reprehenderit libero unde ullam ducimus sunt, saepe fugit animi accusamus accusantium excepturi corrupti aut tenetur? Cumque quasi ratione ipsam facere quod?</p>
</div>
</div>
</main>
<footer class="container bg-light">
<div class="row">
<div class="col-12 py-4">
© 2021 Tutorial Bootstrap
</div>
</div>
</footer>
</body>
</html>
Hasilnya:
Latihan: Layout 4 Kolom
Pada latihan ke-4 ini, kita akan membuat 4 kolom untuk menampilkan galeri foto.
PC,Laptop, Tablet: 4 kolom
HP: 3 kolom.
Berikut ini desainnya:
Mari kita buat!
Buatlah file baru dengan nama contoh-4-kolom.html
, kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Layout 4 Kolom</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<header class="container bg-primary text-white">
<div class="row">
<div class="col-12 py-4 text-center">
<h1 class="display-2">Galleri Bootstrap</h1>
<p class="lead">Panduan Belajar Bootstrap untuk Pemula</p>
</div>
</div>
</header>
<main class="container border p-md-5 p-2">
<div class="row g-2 g-md-4">
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/1" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/2" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/3" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/4" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/5" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/6" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/7" alt="gambar alam">
</div>
<div class="col-6 col-md-3">
<img class="w-100" src="https://placeimg.com/150/150/nature/8" alt="gambar alam">
</div>
</div>
</main>
<footer class="container bg-light">
<div class="row">
<div class="col-12 py-4">
© 2021 Tutorial Bootstrap
</div>
</div>
</footer>
</body>
</html>
Hasilnya:
Latihan: Challenge!
Jika kamu sudah paham cara membuat layout di Bootstrap, coba tantangan berikut.
Buatlah layout galeri yang mirip seperti layout instagram.
Galeri foto menggunakan tiga kolom. Pada tampilan di HP tidak ada gutter anter foto, sedangkan di desktop ada gutternya.
Selamat mencoba!
Kirimkan hasil karyamu di kolom komentar (bisa screenshoot atau link live demo).
Apa Selanjutnya?
Gimana?
Sistem grid mudah bukan?
Selanjutnya, silakan terus berlatih dengan studi kasus yang berbeda dan pelajari tutorial Bootstrap berikutnya.
Jika ada yang belum dipahami, coba tanyakan di kolom komentar.