author Ahmad Muhardian

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap untuk Pemula

Mau buat web dengan cepat?

Mau kode HTML-nya konsisten?

Mau buat tampilan web yang responsive dan bagus?

Pakailah Bootstrap!

Bootstrap saat ini menjadi framework yang paling populer dalam pengembangan web.

Berkat Bootstrap, kita bisa membuat web dengan lebih cepat. Tanpa harus pusing dengan kode CSS. Karena semaunya sudah disediakan oleh Bootstrap.

Pada tutorial ini, kita akan belajar tentang apa itu Bootstrap lalu mencoba menggunakan Bootstrap pada HTML.

mari kita mulai..

Apa itu Bootstrap?

Bootstrap adalah framework CSS.

Cuma itu?

Ya!

Kalau mau yang lebih panjang:

Bootstrap adalah framework CSS yang bersifat Free dan Open Source. Bootstrap menyediakan class-class CSS dan beberapa fungsi Javascript untuk mempermudah pembuatan web.

Jika kamu sebelumnya pernah membuat web tanpa menggunakan framework CSS..

Pasti pernah merasakan membuat kode CSS sendiri dari nol.

Betapa melelahkannya..

Karena itulah, hadir Bootstrap untuk membantu kita.

Biar semakin paham, mari kita bahas sejarahnya dulu:

Sejarah dan Versi Bootstrap

Bootstrap awalnya bernama Twitter Blueprint. Karena waktu itu pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter.

Tujuan awalnya untuk menjaga konsistensi pada tool internal di Twitter. Karena sebelum adanya Bootstrap, tim Twitter sudah menggunakan beberapa library untuk membuat tampilan (GUI) Twitter. Akan tetapi tidak konsisten sehingga kode jadi sulit dirawat (maintenance).

uncosisten

Berangkat dari masalah tersebut:

Mark Otto dan tim kecil yang berisi programmer mulai mendesain dan membuat sebuah tool internal yang dinamakan Twitter Blueprint.

Image result for mark otto and jacob thornton

Setelah beberapa bulan pengembangan, banyak programmer lainnya ikut berkontribusi pada proyek ini sebagai partisipasi dalam Hack Week.

O ya, Hack Week adalah sebuah Hackathon yang ada di tim Development Twitter.

Kemudian Twitter Blueprint diubah namanya menjadi Bootstrap dan dirilis sebagai proyek Open Source pada 19 Agustus 2011.

bootstrap rename

Bootstrap 2 dan 3

Pada tanggal 31 Januari 2012, Bootstrap 2 dirilis dengan penambahan dukungan pada Glyphicons, penambahan beberapa komponen, dan juga perubahan pada komponen yang sudah ada.

img

Pada Versi ini sudah mendukung responsive web design, yakni sebuah layout yang dapat menyesuaikan diri pada ukuran perangkat yang digunakan.

Selanjutnya Bootstrap 3, dirilis pada tanggal 19 Agustus 2013. Pada versi ini komponen Bootstrap didesain ulang dengan konsep Flat design dan menggunakan pendekatan Mobile first.

Bootstrap 3 Flat Design
Bootstrap 3 dengan konsep Flat Design

Pendekatan mobile first artinya tampilan pada mobile diutamakan. Jadi jika ada sebuah class bootstrap digunakan pada elemen, ia akan menggunakan class pada tampilan mobile terlebih dahulu.

Bootstrap 4

Pada tanggal 29 Oktober 2014, Bootstrap 4 rilis dan versi finalnya rilis pada tanggal 18 Januari 2018. Versi final artinya versi yang tidak dilanjutkan pengembangannya.

Bootstrap 4

Beberapa perubahan pada rilis ini:

  • Penulisan ulang kode mayor;
  • Mengganti Less dengan Sass;
  • Menambahkan Normalize CSS;
  • Menghapus dukungan IE8, IE9, dan iOS6;
  • Mendukung CSS Flex Box
  • dan masih banyak lagi (silakan baca di release notes).

Bootstrap 5

Bootstrap 5 resmi dirilis versi Alpha pada tanggal 16 Juni 2020. Berikutnya versi Beta dirilis pada 7 Desember 2020.

Bootstrap 5

Beberapa perubahan pada Bootstrap 5:

  • Menghapus jQuery;
  • Penulisan ulang pada sistem grid;
  • Migrasi dari Jekyll ke Hugo untuk web dokumentasi Bootstrap;
  • Menghapus dukungan untuk IE10 dan IE11;
  • Menambahkan sekumpulan SVG icons;
  • dan masih banyak lagi (silakan baca di release notes).

Nah itulah versi-versi Bootstrap. Buat kamu yang ingin melihat semua versi Bootstrap, silakan cek di link ini: Bootstrap Versions

Lalu versi mana yang akan kita pelajari pada tutorial ini?

Pada tutorial ini kita akan mempelajari versi 5, dan tentunya akan nanti akan saya update jika keluar versi terbaru.

Oke sekarang lanjut..

Persiapan untuk Belajar Bootstrap

Sebelum mulai belajar Bootstrap, siapkan dulu peralatannya dan prasyaratnya.

Untuk prasyarat, kamu setidaknya harus paham CSS dan Javascript terlebih dahulu.

Mengapa?

Karena nanti kita akan banyak menggunakan class Bootstrap, dan jika kamu belum paham tentang CSS.. bisa jadi akan kesulitan memahaminya.

Silakan pelajari:

Lalu untuk Javascript boleh hanya paham basic saja, karena tidak begitu banyak digunakan di tutorial ini.. kecuali pada komponen tertentu.

Silakan pelajari:

Lalu, ada beberapa alat yang kita butuhkan untuk mulai belajar Bootstrap:

1. Teks Editor

Teks editor akan kita gunakan untuk menulis kode. Kamu boleh menggunakan teks editor apapun asalkan paham cara pakainya.

Pada tutorial ini, kita akan menggunakan teks editor Visual Studio Code atau VS Code.

Teks editor visual studio Code

Buat kamu yang ingin tahu cara install VS Code, silakan baca Review dan Instalasi VS Code.

2. Web Browser

Web browser akan kita gunakan untuk melihat hasil kode yang kita tulis. Kamu juga bebas menggunakan web browser apapun.

Namun, jangan pakai IE ya.. karena sudah tua hehe 😄

Web browser untuk membuka HTML

Pada tutorial ini, kita akan menggunakan Google Chrome dan Firefox untuk web browser.

3. Bootstrap

Nah, untuk Bootstrap sendiri..

Kita bisa gunakan yang dari CDN atau Download dengan package manger seperti NPM atau download secara manual juga bisa.

Tenang..

Di tahap berikutnya, kita akan pelajari caranya:

Menggunakan Bootstrap pada HTML

Seperti yang saya bilang tadi..

..ada beberapa cara yang bisa kita lakukan untuk menggunakan Bootstrap.

  1. Menggunakan CDN;
  2. Download secara manual;
  3. Download dengan package manager;

Mari kita coba satu-per-satu:

1. Menggunakan Bootstrap dengan CDN

Cara ini termasuk cara yang paling gampang dilakukan untuk pemula yang baru belajar Bootstrap.

Kita cukup copy link CDN Bootstrap, lalu di taruh pada kode HTML.

Tapi syaratnya kita harus terhubung dengan internet, karena Bootstrap akan diambil dari server CDN.

Oh iya, buat yang belum tahu apa itu CDN:

CDN adalah singkatan dari Content Delivery Network, semacam server yang tersebar di seluruh dunia untuk mengantarkan konten secara optimal dan cepat.

img

Gambar yang kanan adalah server CDN.

Sudah paham kan?

Oke lanjut!

Buatlah folder baru dengan nama belajar-bootstrap, setelah itu buka dengan VS Code.

Klik File lalu pilih open folder.

open folder

Setelah itu, buatlah file HTML baru dengan nama hello-bootstrap.html.

new file

Kemudian isilah 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>Hello Bootstrap</title>

    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
    <header class="bg-primary py-5">
        <div class="container">
            <h1 class="display-4 text-white">Hello Bootstrap!</h1>
        </div>
    </header>


    <!-- JavaScript Bundle with Popper -->
    <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>
</body>

</html>

Coba perhatikan!

Pada kode di atas, kita menggunakan Bootstrap dari CDN JSDeliver.

Dengan demikian, kita bisa langsung menggunakan class-class dari Bootstrap seperti yang dicontohkan pada tag <header>.

Hasilnya:

contoh bootstrap

Kelebihan dari cara ini adalah kita bisa langsung menggunakan Bootstrap tanpa harus download. Tapi tetap butuh koneksi internet.

Cukup dengan menambahkan ini di dalam tag <head>:

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

dan load Javascript di dalam <body>:

<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>

Atribut integrity dan crossorigin berfungsi untuk mengatur keamanan dan integritas file. Jadi file bootstrap.min.css yang kita terima dari CDN benar file aslinya, bukan hasil modifikasi orang.

Berikutnya, kita akan coba cara:

2. Download Bootstrap Secara Manual

Bootstrap dapat kita download dari website resminya, yakni getbootstrap.com. Pada website tersebut terdapat tombol download.

download bootstrap

Versi Bootstrap yang akan kamu dapatkan dari tombol download tersebut adalah versi terbaru.

Agar kita menggunakan versi Bootstrap yang sama, silakan download Bootstrap melalui link berikut:

[Download 📦 Bootstrap-5.0.0.zip]

Setelah itu, kita akan mendapatkan file zip dengan isi sebagai berikut:

bootstrap zip

Oke sekarang kita akan menggunakan Bootstrap dari file zip ini.

Ekstrak folder css dan js ke dalam folder belajar-bootstrap.

Setelah itu, buat file HTML baru dengan nama bs-lokal.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>Bootstrap dari Lokal</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
    
    <header class="py-5 bg-success">
        <div class="container">
            <h1 class="display-4 text-white">Hello Bootstrap Lokal!</h1>
        </div>
    </header>

    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Coba perhatikan!

Pada kode di atas, kita menggunakan bootstrap dari asset lokal dengan tag <link>.

<link rel="stylesheet" href="css/bootstrap.min.css" />

dan tag <script> untuk menggunakan script dari Bootstrap.

<script src="js/bootstrap.min.js"></script>

Hasilnya:

contoh bootstrap lokal

Kelebihan cara ini adalah kita tidak perlu terhubung ke internet seperti pada CDN untuk dapat menggunakan Bootstrap, karena Bootstrap-nya sudah ada di aset lokal.

3. Menggunakan Bootstrap dengan Package Manager

Cara ketiga menggunakan Bootstrap adalah dengan package manager.

Package manager adalah sebuah program untuk manajemen paket pada proyek web. Contohnya: NPM, Composer, Yarn, PNPM, dan sebagainya.

Menggunakan Bootstrap dengan package manager tidak saya rekomendasikan untuk pemula, karena akan membutuhkan pengetahuan lain seperti cara kerja package manager itu sendiri dan ekosistem yang dipakai.

Namun nanti di proyek real, kita akan sering menggunakan package manager untuk memudahkan pekerjaan dalam mengurus paket.

Oke, kalau begitu..

Mari kita pelajari cara setup project web Bootstrap dengan NPM.

Pastikan di komputermu sudah tersinstal Nodejs dan NPM. Setelah itu buatlah folder baru dengan nama project-belajar-bs.

folder project

Setelah itu, buka folder tersebut dengan VS Code.

vscode project bs

Setelah itu, buka Terminal pada VS Code dengan cara tekan Ctrl+`.

Lalu ketik perintah:

npm init -y

Tunggu sampai prosesnya selesai.

Project kita sudah siap.

Berikutnya, kita tinggal menginstal Bootstrap ke dalam project dengan perintah:

npm install bootstrap@next

Perintah ini adalah untuk menginstal Bootstrap 5, untuk Bootstrap 4 gunakan perintah ini:

npm install bootstrap

Tunggulah sampai prosesnya selesai.

Jika kita perhatikan, pada folder project akan ada satu folder baru yakni node_modules yang berisi Bootstrap.

folder project npm

Oke sekarang kita sudah punya bootstrap, cara pakainya gimana?

Ada dua cara:

  1. Menggunakan langsung dari folder node_modules.
  2. Menggunakan dengan pre-processing dan post-processing.

Cara pertama sebenarnya mirip seperti cara yang sebelumnya kita coba, hanya saja beda cara download Bootstrap.

Sedangkan cara kedua membutuhkan tools builder seperti Webpack, ESbuild, Rollup, dll.

Kita akan coba cara yang pertama, untuk cara yang kedua.. lain kali saja kita coba ya. 😃

Baiklah, buatlah file HTML baru di dalam folder project-belajar-bs dengan nama index.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>Bootstrap dengan Package Manager</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <header class="py-5 bg-info text-white">
        <div class="container">
            <h1 class="display-4">Hello Bootstrap!</h1>
            <p class="lead">Menggunakan Bootstrap dengan NPM</p>
        </div>
    </header>
    
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Hasilnya:

contoh bootstrap npm

Cara ini sebenarnya cara kotor, karena kita me-load langsung Bootstrap dari folder node_modules 😄..

Seharusnya kita melakukan pre dan post processing dulu.

Tapi tidak apa-apa, soalnya ini cuma contoh.. bukan project real.

Apa Selanjutnya?

Sejauh ini kita sudah mengenal Bootstrap, mulai dari sejarah hingga cara menggunakan Bootstrap pada HTML.

Pada tutorial berikutnya, kita akan menggunakan cara pertama dan cara kedua, karena lebih mudah.

Selanjutnya silakan pelajari tentang: