Materi Lengkap Bootstrap
1. Apa itu Bootstrap?
Bootstrap adalah framework CSS open-source yang digunakan untuk membantu pengembangan web dengan cepat dan efisien. Bootstrap menyediakan class siap pakai untuk membuat desain website yang responsif, konsisten, dan mobile-first.
2. Cara Menggunakan Bootstrap
a. Menggunakan CDN
Masukkan link berikut ke dalam file HTML di bagian <head>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
b. Menggunakan File Download
- Download dari https://getbootstrap.com
- Ekstrak file dan letakkan folder
css/danjs/di dalam project - Hubungkan ke HTML dengan:
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
3. Struktur Grid Bootstrap
Bootstrap menggunakan sistem grid 12 kolom.
<div class="container">
<div class="row">
<div class="col-md-4">Kolom 1</div>
<div class="col-md-4">Kolom 2</div>
<div class="col-md-4">Kolom 3</div>
</div>
</div>
Breakpoints Responsive:
col-sm-*untuk layar ≥576pxcol-md-*untuk layar ≥768pxcol-lg-*untuk layar ≥992pxcol-xl-*untuk layar ≥1200px
4. Komponen Bootstrap
a. Tombol
<button class="btn btn-primary">Tombol Biru</button>
<button class="btn btn-danger">Tombol Merah</button>
b. Formulir
<form>
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" id="nama">
</div>
</form>
c. Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
d. Card (Kartu)
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul</h5>
<p class="card-text">Deskripsi isi card.</p>
<a href="#" class="btn btn-primary">Lihat</a>
</div>
</div>
e. Modal (Popup)
<!-- Tombol -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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 dari modal.
</div>
</div>
</div>
</div>
5. Utilitas Bootstrap (Utilities)
Utilitas adalah class siap pakai untuk styling cepat.
- Margin & Padding:
m-3,p-2,mt-4,px-5 - Warna:
bg-primary,text-danger,text-white - Text:
text-center,text-end,fw-bold - Display:
d-none,d-block,d-flex,d-md-none
6. Tips Penggunaan
- Gunakan struktur grid dengan bijak
- Kombinasikan komponen dan utilitas
- Uji tampilan di berbagai ukuran perangkat (Responsif)
7. Referensi Resmi
- Dokumentasi Bootstrap: https://getbootstrap.com/docs
8. Contoh Project Sederhana
Buat halaman dengan:
- Header Navbar
- 2 kolom konten
- Card galeri gambar
- Footer
Bootstrap mempermudah pembuatan website modern tanpa perlu banyak menulis CSS dari awal.