By A Mimar Hidayat in Bootstrap 5 —

Perkenalan Bootstrap 5

Perkenalan Bootstrap 5

Bootstrap merupakan salah satu framework CSS paling populer di dunia untuk membangun website yang responsif dan mobile-first. Artikel ini akan memandu kamu untuk memulai penggunaan Bootstrap secara cepat menggunakan CDNjsDelivr, serta memberikan contoh halaman HTML sebagai starter template.

🚀 Quick Start

Jika kamu ingin langsung menggunakan Bootstrap tanpa mengunduh file, kamu bisa memanfaatkan jsDelivr, CDN open source gratis yang sangat mudah digunakan.

Namun jika kamu ingin menggunakan package manager seperti npm atau mengunduh sumber kode, kamu bisa mengunjungi halaman unduhan Bootstrap.

🧩 Cara Menggunakan Bootstrap

1. Tambahkan CSS

Salin dan tempel kode berikut ke dalam <head> HTML kamu:

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

2. Tambahkan JavaScript

Banyak komponen Bootstrap seperti tooltip dan modal memerlukan JavaScript agar berfungsi. Kamu bisa memilih satu dari dua opsi berikut:

Opsi 1: Menggunakan Bundle (disarankan)

Menggabungkan semua plugin Bootstrap dan dependency seperti Popper:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Opsi 2: Pisahkan Popper dan Bootstrap

Jika kamu lebih memilih file terpisah, tambahkan Popper terlebih dahulu, kemudian Bootstrap:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

🧪 Starter Template

Berikut adalah contoh template HTML minimal yang direkomendasikan untuk memulai:

<!doctype html>
<html lang="en">
<head>
<!-- Meta wajib -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

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

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- JavaScript Bundle Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Untuk eksplorasi lebih lanjut, kunjungi dokumentasi Layout Bootstrap atau contoh resmi lainnya.

🔧 Hal-Hal Penting (Globals)

Bootstrap menerapkan beberapa pengaturan global penting untuk memastikan kompatibilitas lintas browser:

HTML5 Doctype

Pastikan dokumen kamu menggunakan <!doctype html> agar tampilan Bootstrap tidak rusak.

Meta Tag Responsive

Untuk tampilan responsif, tambahkan meta viewport:

htmlCopyEdit<meta name="viewport" content="width=device-width, initial-scale=1">

Box-Sizing

Bootstrap mengatur box-sizing: border-box secara global agar padding tidak memengaruhi ukuran elemen. Jika perlu mengembalikannya ke content-box, gunakan:

cssCopyEdit.selector-for-some-widget {
box-sizing: content-box;
}

Reboot

Bootstrap menyertakan Reboot, yaitu kumpulan reset dan normalisasi CSS agar tampilan lebih konsisten di semua browser.