General

Bootstrap 5: Komponen Penting untuk Website Modern

Oleh Admin • 8 September 2025 • 6 min baca

Bootstrap 5 adalah framework CSS paling populer untuk bikin website modern, cepat, dan responsif. Dengan Bootstrap, lo bisa bikin layout, tombol, navigasi, form, dan komponen lainnya tanpa harus nulis CSS dari nol 🚀

1. Cara Menggunakan Bootstrap 5

Bootstrap bisa dipakai lewat CDN atau diinstall via npm. Untuk pemula, cukup pakai link CDN.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Belajar Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center text-primary">Halo, Bootstrap 5!</h1>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

👉 Dengan hanya beberapa baris, tampilan web langsung jadi modern.

2. Grid System (Layout Responsif)

Bootstrap pakai sistem grid 12 kolom. Ini memudahkan bikin layout responsif untuk HP, tablet, dan desktop.

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-light p-3">Kolom 1</div>
    <div class="col-md-4 bg-secondary text-white p-3">Kolom 2</div>
    <div class="col-md-4 bg-light p-3">Kolom 3</div>
  </div>
</div>

👉 Di HP tampil 1 kolom, di desktop tampil 3 kolom.

3. Komponen Penting Bootstrap

3.1 Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BrandKu</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

---

3.2 Button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

---

3.3 Card

<div class="card" style="width:18rem;">
  <img src="https://picsum.photos/300/200" class="card-img-top" alt="Gambar">
  <div class="card-body">
    <h5 class="card-title">Judul Card</h5>
    <p class="card-text">Ini contoh card Bootstrap dengan gambar dan teks.</p>
    <a href="#" class="btn btn-primary">Lihat Detail</a>
  </div>
</div>

---

3.4 Form

<form class="p-3">
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

---

3.5 Modal (Popup)

<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">
  Buka Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Judul Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Ini adalah isi modal Bootstrap.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

---

3.6 Alert (Notifikasi)

<div class="alert alert-success">Berhasil disimpan!</div>
<div class="alert alert-danger">Terjadi kesalahan!</div>

4. Contoh Project Mini dengan Bootstrap

Sekarang kita gabungkan beberapa komponen: navbar, card, dan footer.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Website Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <nav class="navbar navbar-dark bg-dark mb-4">
    <div class="container">
      <a class="navbar-brand" href="#">MySite</a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card mb-4">
          <img src="https://picsum.photos/400/200" class="card-img-top" alt="Gambar">
          <div class="card-body">
            <h5 class="card-title">Artikel 1</h5>
            <p class="card-text">Ini contoh artikel dengan card Bootstrap.</p>
            <a href="#" class="btn btn-primary">Baca</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <img src="https://picsum.photos/400/201" class="card-img-top" alt="Gambar">
          <div class="card-body">
            <h5 class="card-title">Artikel 2</h5>
            <p class="card-text">Card lain dengan gambar acak.</p>
            <a href="#" class="btn btn-primary">Baca</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-dark text-white text-center p-3 mt-4">
    © 2025 MySite
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

👉 Dengan sedikit kode, lo udah punya website responsif, modern, dan rapi.

Kesimpulan

Bootstrap 5 mempermudah developer bikin website modern. Komponen penting yang harus lo kuasai:

Grid System
Navbar
Button
Card
Form
Modal
Alert

👉 Next step: coba bikin landing page sederhana dengan Bootstrap, atau kombinasikan dengan framework JavaScript (React/Vue) untuk project yang lebih besar.