author

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Layout Bootstrap

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.

Sistem Grid 12 Kolom

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.

bootstrap breakpoint

Ini adalah ukuran breakpoint sesaui 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.

tanpa breakpoint

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.

menggunakan breakpoint

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.

container 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 ktia 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:

contoh container

Jika class container dihapus, maka hasilnya:

class container dihapus

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.

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:

gutter 0

Sekarang coba ubah g-0 menjadi g-5 untuk memberikan jarak sebesar 5.

Maka hasilnya:

gutter 5

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:

desain web satu kolom

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">
                &copy; 2021 Tutorial Bootstrap
            </div>
        </div>
    </footer>

</body>

</html>

Hasilnya:

contoh layout 1 kolom

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:

desain web dua kolom

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">
                &copy; 2021 Tutorial Bootstrap
            </div>
        </div>
    </footer>

</body>

</html>

Hasilnya:

contoh layout 2 kolom

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:

desain-web-tiga-kolom

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">
                &copy; 2021 Tutorial Bootstrap
            </div>
        </div>
    </footer>

</body>

</html>

Hasilnya:

contoh layout 3 kolom

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:

desain-web-4-kolom

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">
                &copy; 2021 Tutorial Bootstrap
            </div>
        </div>
    </footer>

</body>

</html>

Hasilnya:

contoh layout 4 kolom tablet

contoh layout 2 kolom hp

Latihan: Challenge!

Jika kamu sudah paham cara membuat layout di Bootstrap, coba tantangan berikut.

Buatlah layout galeri yang mirip seperti layout instagram.

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, silahkan terus berlatih dengan studi kasus yang berbeda dan pelajari tutorial Bootstrap berikutnya.

Jika ada yang belum dipahami, coba tanyakan di kolom komentar.

  1. https://getbootstrap.com/docs/5.0/layout/breakpoints/ ↩︎