Bootstrap

02 Jun 2025 -

penjelasan tentang Bootstrap

1. Apa Itu Bootstrap?

Bootstrap adalah framework HTML, CSS, dan JavaScript open-source yang digunakan untuk merancang tampilan dan komponen antarmuka pengguna (UI) yang resposif dan mobile-first.

Dikembangkan oleh Twitter (oleh Mark Otto dan Jacob Thornton) dan pertama kali dirilis tahun 2011, Bootstrap kini telah mencapai versi 5.x dan digunakan oleh jutaan developer di seluruh dunia.

2. Keunggulan Bootstrap

3. Cara Menggunakan Bootstrap

🔹 A. Menggunakan CDN (Cara Termudah)

Tambahkan baris berikut ke dalam <head> dan sebelum penutup <body> di HTML kamu:

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS Bootstrap Bundle (termasuk Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

🔹 B. Menginstal via NPM (untuk proyek build dengan Webpack/Gulp/Vite)

npm install bootstrap

Lalu import di file JS atau SCSS kamu:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

4. Komponen Penting Bootstrap

Berikut beberapa komponen UI paling sering digunakan:

Tombol

<button class="btn btn-primary">Tombol Utama</button>
<button class="btn btn-danger">Hapus</button>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
</nav>

Card

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="Gambar">
  <div class="card-body">
    <h5 class="card-title">Judul</h5>
    <p class="card-text">Isi konten kartu.</p>
  </div>
</div>

Formulir

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Alert

<div class="alert alert-success" role="alert">
  Data berhasil disimpan!
</div>

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

<!-- Modal -->
<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">
        Isi konten modal.
      </div>
    </div>
  </div>
</div>

5. Kesimpulan

Bootstrap adalah framework front-end yang mudah, cepat, dan powerful untuk membuat website yang responsive dan modern. Dengan sistem grid, komponen siap pakai, serta utilitas lengkap, kamu bisa membangun antarmuka pengguna dalam waktu singkat dan hasil profesional.