Pengenalan HTML 5
Styling menggunakan bootstrap 5 (Bagian 1)

oleh: Suryo Adhy Chandra, ST

Apa itu bootstrap 5?

Bootstrap 5 adalah pustaka front-end populer yang menyederhanakan proses desain dan pengembangan web. Aplikasi ini dibuat oleh tim Twitter dan pertama kali dirilis pada tahun 2011.

Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk mempercepat proses pengembangan web responsive dan mobile-first (memprioritaskan perangkat seluler).

Selain bisa digunakan untuk mengembangkan website dengan lebih cepat, Bootstrap juga merupakan framework gratis yang bersifat open-source. Skrip dan syntax yang disediakan Bootstrap bisa diterapkan untuk berbagai komponen dalam desain web.

Nah! Kali ini, selain membahas pengertian Bootstrap, kami juga akan membahas kelebihan dan kekurangannya, serta berbagai jenis file yang digunakan framework ini. Jadi, kami akan membantu Anda menentukan apakah Bootstrap adalah pilihan tepat untuk Anda. Mari mulai!

Bagaimana menggunakan bootstrap 5?

Kita ingat di dalam struktur html versi 5 terdapat head bukan?

Untuk menggunakan bootstrap 5, kita akan tambahkan sebuah tag di bawah tag <head>: 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
            
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

sehingga struktur htmlnya akan menjadi:

Nah, untuk melakukan pengetesan apakah bootstrap 5 kita sudah berhasil, kita akan coba menambahkan sebuah tag <p></p> dengan styling ukuran fontnya adalah h1 dengan menambahkan kata kunci class='h1' di dalam tag p tersebut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Contoh</title>
</head>
<body>
    <p class="h1">
        Saya menggunakan styling bootstrap 5
    </p>
</body>
</html>

Kemudian kita simpan file tersebut dengan nama bootstrap1.html dan kita jalankan di browser kita. Apakah ada tampilan yang berubah?

Kalau semua tampilan sama, berarti cara kita memanggil bootstrap 5 sudah benar! Selamat!
Kita akan lanjutkan minggu depan untuk membuat styling sederhana lain menggunakan boostrap 5!

Mengapa memakai framework?

Menulis CSS dari nol ibarat memasak setiap bumbu sendiri: hasilnya bisa persis sesuai selera, tetapi memakan waktu. Bootstrap mirip bumbu instan yang sudah ditakar. Kamu cukup menempelkan nama class pada elemen, dan tampilan langsung berubah. Selain cepat, Bootstrap juga menjaga konsistensi: tombol, kartu, dan tabel di seluruh situs tampak seragam. Bootstrap juga sudah responsif, artinya tata letak menyesuaikan diri dengan lebar layar ponsel, tablet, atau komputer.

Cara kerja class

Setiap class Bootstrap sebenarnya adalah kumpulan aturan CSS yang sudah ditulis oleh pembuatnya. Saat kamu menulis class="h1", browser mencari aturan bernama .h1 di berkas bootstrap.min.css lalu menerapkannya. Satu elemen boleh memiliki banyak class sekaligus, dipisahkan spasi. Karena itu kamu bisa menggabungkan beberapa kemampuan kecil menjadi satu tampilan. 

<p class="h2 text-primary fw-bold text-center">Selamat belajar!</p>
<button class="btn btn-success">Mulai</button>
<button class="btn btn-outline-danger">Batal</button>
<div class="alert alert-info">Jangan lupa simpan filemu.</div>

Pada contoh pertama ada empat class: h2 mengatur ukuran huruf, text-primary memberi warna biru, fw-bold membuat huruf tebal, dan text-center meratakan teks ke tengah. Tombol memakai btn sebagai dasar lalu btn-success untuk warna hijau; versi btn-outline-danger hanya memberi garis tepi merah. Kotak alert cocok untuk pesan informasi.

CDN dan kenapa perlu internet

Tautan yang diawali https://cdn.jsdelivr.net menunjuk ke CDN (Content Delivery Network), yaitu jaringan server yang menyimpan berkas Bootstrap. Browser mengunduhnya setiap halaman dibuka. Konsekuensinya, bila kamu mengetes halaman tanpa internet, tampilan Bootstrap tidak akan muncul. Alternatifnya, kamu bisa mengunduh berkas Bootstrap dan menaruhnya di folder proyek, lalu menautkannya dengan alamat relatif.

Kesalahan yang sering terjadi

Ringkasan

Bootstrap adalah kumpulan class siap pakai. Pasang lewat dua tag di bagian head, lalu tambahkan class pada elemen. Satu elemen boleh memiliki banyak class, dan hasilnya otomatis responsif.

Latihan

  1. Class apa yang membuat teks berwarna merah dan tebal?
    Lihat jawabantext-danger fw-bold
  2. Mengapa halaman Bootstrap tampil polos saat tidak ada internet?
    Lihat jawabanKarena berkas Bootstrap diambil dari CDN secara online; tanpa koneksi, berkas tidak termuat.
  3. Buatlah tombol hijau bertuliskan "Kirim" dengan Bootstrap.
    Lihat jawaban<button class="btn btn-success">Kirim</button>
  4. Apa arti "responsif" pada Bootstrap?
    Lihat jawabanTampilan menyesuaikan otomatis dengan lebar layar perangkat, baik ponsel, tablet, maupun komputer.
← Kembali Ke Daftar Pelajaran HTML