Tutorial Komponen Bootstrap 5 (Versi Ringkas + Gambar)

Panduan cepat menggunakan komponen-komponen penting Bootstrap 5 seperti Navbar, Slider, Modal, Card, Form, dan lainnya.

1. Navbar

Navbar digunakan sebagai menu navigasi utama.

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

2. Slider / Carousel

Slider menampilkan gambar berjalan otomatis.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></button>
    <button data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1200/400?1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/400?2" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/400?3" class="d-block w-100">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

3. Modal

Popup kotak dialog yang sering digunakan untuk login atau notifikasi.

Button pembuka modal:

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

Kode Modal:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Judul Modal</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Isi modal di sini.</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
        <button class="btn btn-primary">Simpan</button>
      </div>
    </div>
  </div>
</div>

4. Card

Card sering dipakai untuk menampilkan artikel atau produk.

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

5. Form Input

<form class="mt-3">
  <div class="mb-3">
    <label class="form-label">Nama</label>
    <input type="text" class="form-control" placeholder="Masukkan nama">
  </div>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="Masukkan email">
  </div>
  <button class="btn btn-primary">Kirim</button>
</form>

6. Alert

<div class="alert alert-success">Berhasil!</div>
<div class="alert alert-warning">Peringatan!</div>
<div class="alert alert-danger">Gagal!</div>

7. Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#a1">Pertanyaan 1</button>
    </h2>
    <div id="a1" class="accordion-collapse collapse show">
      <div class="accordion-body">Jawaban dari pertanyaan 1.</div>
    </div>
  </div>
</div>

8. Tabs

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a></li>
</ul>

<div class="tab-content p-3 border border-top-0">
  <div class="tab-pane fade show active" id="home">Isi tab Home.</div>
  <div class="tab-pane fade" id="profile">Isi tab Profile.</div>
</div>

Selesai! Semua komponen sudah dibuat versi ringkas + gambar agar mudah dipahami.