Menu docs ＋

Catatan Belajar · · 2 menit baca

Belajar Bootstrap 5: grid, komponen, dan kustomisasi Sass

Tutorial Bootstrap 5: pasang via CDN atau npm, grid 12 kolom mobile-first, komponen interaktif lewat data-bs-* tanpa JavaScript, dan cara kustomisasi yang benar lewat variabel Sass.

Bootstrap 5SassCSS

Bootstrap 5 adalah jalan tercepat dari nol ke halaman yang rapi: komponen jadi (navbar, modal, card), sistem grid yang teruji, dan tanpa perlu memikirkan desain dari awal. Filosofinya kebalikan dari Tailwind — Bootstrap memberimu komponen siap pakai, Tailwind memberimu bahan mentah. Keduanya layak dikuasai.

1. Instalasi

Jalur tercepat — CDN (untuk belajar & prototipe):

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-center mt-5">Halo Bootstrap</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Jalur project sungguhan — npm (supaya bisa kustomisasi):

npm install bootstrap

// styles/main.scss
@import "bootstrap/scss/bootstrap";

2. Grid: 12 kolom, mobile-first

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Kartu 1</div>
    <div class="col-12 col-md-6 col-lg-4">Kartu 2</div>
    <div class="col-12 col-md-6 col-lg-4">Kartu 3</div>
  </div>
</div>

Bacanya: penuh (12/12) di HP, setengah (6/12) mulai tablet, sepertiga (4/12) mulai desktop. g-4 = jarak antar kolom. Ini 80% dari layout Bootstrap.

3. Komponen tanpa menulis JavaScript

Komponen interaktif Bootstrap dikendalikan lewat atribut data-bs-*:

<!-- Tombol yang membuka modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#konfirmasi">
  Hapus Produk
</button>

<div class="modal fade" id="konfirmasi" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Yakin?</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Produk akan dihapus permanen.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button class="btn btn-danger">Hapus</button>
      </div>
    </div>
  </div>
</div>

Pola yang sama berlaku untuk dropdown, collapse, offcanvas, tooltip — hafalkan satu, paham semua.

4. Kustomisasi lewat Sass, bukan menimpa CSS

Cara yang benar mengubah warna brand — timpa variabelnya sebelum import:

// styles/main.scss
$primary: #0d9488;          // ganti biru default jadi teal
$border-radius: 0.25rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

@import "bootstrap/scss/bootstrap";

Semua komponen (tombol, link, badge, form focus) mengikuti otomatis. Menimpa .btn-primary { background: ... } di CSS belakangan = perang specificity tanpa akhir — hindari.

Tips dari pengalaman

  • Jangan lawan grid — kalau layout terasa sulit, biasanya kamu sedang mencoba sesuatu yang grid 12 kolom tidak dirancang untuknya; pakai flex utilities (d-flex, justify-content-between) yang juga tersedia.
  • Situs Bootstrap terlihat “seperti Bootstrap” kalau kamu memakai default-nya mentah — kustomisasi Sass 15 menit (warna, radius, font) langsung menghilangkan kesan template.
  • Pilih Bootstrap saat butuh cepat dan tim belum kuat di CSS; pilih Tailwind saat butuh desain yang benar-benar khas. Aku memakai keduanya tergantung project.

Mau fitur seperti ini dibangun untuk bisnismu?

Mulai projectDocs lainnya