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!

← Kembali Ke Daftar Pelajaran HTML