General

Bagaimana Cara Menggunakan Bootstrap?

Oleh Admin • 5 September 2025 • 5 min baca

Kalau lo pengen bikin website dengan tampilan modern tanpa ribet, Bootstrap adalah pilihan terbaik. Bootstrap adalah framework CSS yang menyediakan banyak class siap pakai untuk layout, tombol, form, navbar, dan komponen lainnya.

1. Apa Itu Bootstrap?

Bootstrap adalah framework front-end yang berisi kumpulan CSS & JavaScript siap pakai. Dengan Bootstrap, lo bisa bikin tampilan website responsif dengan cepat tanpa nulis CSS dari nol.

Dirilis pertama kali oleh Twitter (2011)
Dipakai di jutaan website
Versi terbaru: Bootstrap 5

2. Cara Menggunakan Bootstrap

Ada 2 cara pakai Bootstrap:

CDN (langsung online)
Download file Bootstrap (offline)

Contoh via CDN:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar Bootstrap</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!</h1>

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

👉 Kalau jalan, teks akan berwarna biru dengan gaya Bootstrap.

3. Grid System

Grid system Bootstrap pakai 12 kolom. Contoh 3 kolom seimbang:

<div class="container">
  <div class="row">
    <div class="col bg-primary text-white">Kolom 1</div>
    <div class="col bg-success text-white">Kolom 2</div>
    <div class="col bg-danger text-white">Kolom 3</div>
  </div>
</div>

4. Komponen Dasar Bootstrap

🔘 Tombol

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

📑 Card

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

👉 Gambar https://picsum.photos selalu kasih foto random valid (aman, nggak 404).

📋 Form

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

📌 Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-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>
      </ul>
    </div>
  </div>
</nav>

5. Mini Project: Landing Page Sederhana

Contoh gabungan semua komponen:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Landing Page</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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Belajar Bootstrap</a>
  </div>
</nav>

<div class="container my-5 text-center">
  <h1 class="mb-4">Selamat Datang di Website Saya</h1>
  <p class="lead">Website ini dibuat dengan Bootstrap 5 🚀</p>
  <a href="#" class="btn btn-primary btn-lg">Mulai Sekarang</a>
</div>

<div class="container my-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="https://picsum.photos/300/200" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Fitur 1</h5>
          <p class="card-text">Deskripsi fitur pertama.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://picsum.photos/300/200?random=2" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Fitur 2</h5>
          <p class="card-text">Deskripsi fitur kedua.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://picsum.photos/300/200?random=3" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Fitur 3</h5>
          <p class="card-text">Deskripsi fitur ketiga.</p>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Kesimpulan

Dengan Bootstrap, lo bisa bikin website modern dan responsif dengan cepat. Di artikel ini, kita udah belajar:

Apa itu Bootstrap
Cara install lewat CDN
Grid system
Tombol, form, navbar, card
Membuat landing page sederhana

👉 Next step: lo bisa kembangin jadi portfolio, blog, atau toko online kecil. Kalau udah jago Bootstrap, lo bisa lanjut ke framework modern kayak Tailwind CSS atau React + Bootstrap.