Bootstrap

Grid System

Components

Utilities

Responsive

Mobile-First

BAB 7

|

Front-End Master Class | Kelas 10 Semester 1

22 Slides Animasi Interaktif Mini Project

Catatan: butuh koneksi internet untuk memuat Bootstrap CDN.

02

Agenda Pembelajaran

13 materi yang akan kita kuasai hari ini — klik untuk lompat ke materi.

03

Apa itu Bootstrap?

Membangun dari nol vs membangun dengan blueprint siap pakai.

Analogi: Gedung Mall vs Gedung dari Nol

Tanpa Bootstrap = membangun gedung dari bata satu per satu (tulis semua CSS sendiri).
Dengan Bootstrap = pakai blueprint + material jadi (tinggal pasang).

Penjelasan

Bootstrap adalah framework CSS — sekumpulan kode CSS & JavaScript siap pakai yang dibuat tim Twitter. Kita tinggal menambahkan class ke elemen HTML, dan tampilannya langsung rapi & responsif.

Cepat Responsif otomatis Konsisten Gratis

Cara Memasang (CDN)

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- letakkan sebelum penutup </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Demo: Adu Cepat Membangun

Manual CSS (lambat)

Bootstrap (cepat)

04

Bootstrap dalam Kehidupan Nyata

4 analogi supaya konsepnya nempel di kepala.

LEGO®

Bootstrap = LEGO untuk website. Tiap class adalah balok yang tinggal dipasang.

card

btn

navbar

Lantai Mall

Grid System = lantai mall yang dibagi rapi menjadi petak-petak toko (kolom).

Seragam

Utility class = seragam siap pakai. Mau warna/jarak/teks? Tinggal pakai class.

Blueprint

Komponen = blueprint bangunan. Navbar, modal, card — tinggal cetak & pakai.

05

Container

Pembungkus yang menjaga konten tetap rapi di tengah.

Analogi: Bingkai Foto

Container = bingkai yang membatasi konten agar tidak melebar ke seluruh layar dan tetap di tengah.

Jenis Container

Class	Perilaku
`.container`	Lebar tetap, di-tengah, berubah per breakpoint
`.container-fluid`	Selalu 100% lebar layar
`.container-md`	Fluid sampai md, lalu jadi tetap

Demo: Geser untuk simulasi lebar layar

container 100%

Kode

HTML

<div class="container">
  <h1>Konten saya rapi di tengah</h1>
</div>

<div class="container-fluid"> <!-- full width --> </div>

06

Row & Column

Baris dan kolom — fondasi tata letak Bootstrap.

Analogi: Meja Makan

Row = satu baris meja. Col = kursi-kursi yang mengisi meja itu. Total kursi selalu pas 12.

Struktur Wajib

HTML

<div class="container">
  <div class="row">
    <div class="col">Kiri</div>
    <div class="col">Kanan</div>
  </div>
</div>

Ingat urutannya: container → row → col.

Demo Interaktif: pilih jumlah kolom

col

Tiap kolom otomatis berbagi ruang sama rata.

07

Grid System — 12 Kolom

Layar selalu dibagi menjadi 12 bagian.

Analogi: Pizza 12 Potong

Layar = pizza yang dipotong jadi 12. Kamu bebas membagi: 6+6, 4+4+4, atau 3+3+3+3 — asal total = 12.

12 Kolom Dasar

1

2

3

4

5

6

7

8

9

10

11

12

Kombinasi Populer

col-6

col-4

3

2

col-8

2

Coba Sendiri: klik kombinasi

col-6

HTML

<div class="row">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

08

Breakpoint (Responsive)

Satu kode, tampil bagus di semua ukuran layar.

Analogi: Ukuran Baju S / M / L / XL

Breakpoint = ukuran baju yang menyesuaikan tubuh. Layar HP pakai "S", laptop pakai "L".

Tabel Breakpoint

Kode	Lebar Layar	Perangkat
`xs`	< 576px	HP kecil
`sm`	≥ 576px	HP
`md`	≥ 768px	Tablet
`lg`	≥ 992px	Laptop
`xl`	≥ 1200px	Desktop
`xxl`	≥ 1400px	Layar besar

Demo: perangkat berganti otomatis

HP — 1 kolom

Tablet — 2 kolom

Laptop — 4 kolom

Kode

HTML

<div class="col-12 col-md-6 col-lg-3">
  <!-- HP: penuh | Tablet: 1/2 | Laptop: 1/4 -->
</div>

Bootstrap itu mobile-first: tulis untuk HP dulu, lalu tambah aturan layar besar.

09

Navbar

Menu navigasi yang otomatis jadi hamburger di HP.

Analogi: Papan Nama Restoran

Navbar = papan nama + daftar menu di pintu masuk. Pengunjung langsung tahu ke mana harus pergi.

Kode Inti

HTML

<nav class="navbar navbar-expand-lg
            navbar-dark bg-dark">
  <a class="navbar-brand">Logo</a>
  <button class="navbar-toggler"
    data-bs-toggle="collapse">...</button>
</nav>

navbar-darksticky-topfixed-top

Demo Langsung — perkecil layar / klik hamburger

Konten halaman di bawah navbar…

10

Card

Kotak konten serbaguna untuk produk, profil, artikel.

Analogi: Kartu Undangan

Card = kotak rapi berisi gambar, judul, teks, dan tombol. Bisa dipakai untuk apa saja.

Produk

Card untuk menampilkan barang jualan dengan harga.

Beli

Profil

Card untuk kartu anggota tim.

Developer

ARTIKEL

Belajar Bootstrap

Card untuk daftar berita atau blog.

5 menit baca

Anatomi Card

HTML

<div class="card">
  <img class="card-img-top" src="...">
  <div class="card-body">
    <h5 class="card-title">Judul</h5>
    <p class="card-text">Isi…</p>
  </div>
</div>

11

Button & Variants

Warna berbeda = makna berbeda.

Analogi: Tombol Lift

Tiap warna tombol punya arti — hijau = berhasil, merah = bahaya, kuning = hati-hati.

Kode

HTML

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-outline-danger">Outline</button>
<button class="btn btn-warning btn-lg">Besar</button>

Ukuran: btn-sm, btn, btn-lg.

Semua Variant (klik untuk demo)

12

Modal

Jendela pop-up di atas halaman.

Analogi: Pop-up / Dialog Box

Modal = jendela kecil yang muncul di atas halaman untuk meminta perhatian / konfirmasi.

Kode

HTML

<button data-bs-toggle="modal"
        data-bs-target="#myModal">Buka</button>

<div class="modal" id="myModal">
  ... isi modal ...
</div>

modal-smmodal-lgmodal-xl

Demo Langsung

Klik tombol untuk membuka modal nyata:

13

Carousel

Galeri gambar yang berganti otomatis.

Analogi: Instagram Story

Carousel = slide foto bergantian, lengkap dengan tombol next/prev dan titik indikator.

Kode Inti

HTML

<div class="carousel slide"
     data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">…</div>
  </div>
</div>

Demo Langsung (autoplay)

Slide Satu

Slide Dua

Slide Tiga

14

Alert

Kotak pesan berwarna untuk memberi tahu pengguna.

Analogi: Notifikasi HP

Hijau = sukses, merah = error, kuning = peringatan, biru = info. Sama seperti notif di ponselmu.

Kode

HTML

<div class="alert alert-success">
  Berhasil disimpan!
</div>

<<!-- bisa ditutup -->
<div class="alert alert-warning alert-dismissible">
  Hati-hati! <button class="btn-close"
    data-bs-dismiss="alert"></button>
</div>

Demo (muncul satu per satu) & bisa ditutup

Sukses — data berhasil disimpan.

Error — terjadi kesalahan.

Peringatan — periksa kembali isian.

Info — klik tombol X untuk menutup →

15

Form Bootstrap

Formulir yang rapi lengkap dengan validasi.

Analogi: Formulir Pendaftaran

Form Bootstrap = formulir dengan label jelas dan kotak isian rapi, plus tanda hijau/merah saat validasi.

Kode

HTML

<label class="form-label">Email</label>
<input class="form-control" type="email">
<select class="form-select">…</select>
<input class="form-check-input" type="checkbox">

Demo: Form Login (coba submit)

16

Mini Project: Company Profile

Gabungkan semua yang sudah dipelajari jadi satu halaman.

Struktur Halaman (wireframe)

NAVBAR — logo + menu

HERO — judul besar + tombol CTA

ABOUT — 2 kolom (teks + gambar)

SERVICES — 3 card layanan

TEAM — 3 card anggota

CONTACT — form kontak

FOOTER — copyright + sosial media

Alur Kerja

Planning — gambar wireframe di kertas dulu.
Coding — pasang Bootstrap, susun section dari atas ke bawah.
Testing — cek di HP & laptop.
Result — Company Profile siap dipresentasikan.

Tools yang Dibutuhkan

VS Code Browser (Chrome/Edge) Bootstrap CDN Koneksi internet

17

Live Demo: Company Profile

Inilah hasil jadinya — semua komponen Bootstrap bekerja sama.

Solusi Digital Masa Depan

Kami membangun website & aplikasi untuk bisnis Anda.

Tentang Kami

Perusahaan teknologi yang fokus pada kualitas dan inovasi sejak 2020.

Layanan

Web Design

Website modern & responsif.

Mobile App

Aplikasi Android & iOS.

Digital Marketing

Promosi online efektif.

Scroll di dalam kotak untuk melihat seluruh halaman.

18

Alur Kerja Bootstrap

Langkah demi langkah membangun halaman.

START — siapkan file HTML.

1

Pasang Bootstrap CDN di <head>.

2

Buat Container sebagai pembungkus.

3

Tambah Row & Col untuk tata letak.

4

Pilih Komponen (navbar, card, button…).

5

Tambah Utility Class (warna, jarak, teks).

6

Atur Breakpoint agar responsif.

FINISH — preview di browser! 🎉

19

Rangkuman & Cheat Sheet

Arahkan kursor ke tiap class untuk melihat penjelasan.

Layout

.container

Pembungkus konten yang di-tengah & responsif.

.row

Baris untuk menampung kolom.

.col-6

Kolom selebar 6 dari 12 (setengah).

.col-md-4

Sepertiga lebar mulai layar tablet ke atas.

Komponen

.navbar

Bar navigasi atas yang responsif.

.card

Kotak konten serbaguna.

.btn .btn-primary

Tombol dengan warna utama.

.modal

Jendela pop-up di atas halaman.

Utilities

.text-center

Teks rata tengah.

.mt-3 / .p-4

Margin-top 3 / padding 4 (jarak).

.bg-dark .text-light

Latar gelap, teks terang.

.d-flex

Mengaktifkan flexbox.

Dokumentasi resmi: getbootstrap.com

Simpan halaman ini sebagai contekan saat mengerjakan tugas!

20

Latihan 1 — Grid Layout

Estimasi waktu: 30 menit.

Instruksi

Buatlah sebuah halaman HTML dengan Bootstrap yang memiliki:

Header dengan navbar sederhana (nama sekolah + 3 menu).
Section dengan 3 kolom berisi card (foto, judul, teks singkat).
Layout: di desktop 3 kolom (col-md-4), di HP 1 kolom (col-12).

PETUNJUK

<div class="row">
  <div class="col-12 col-md-4"> ... card ... </div>
  <div class="col-12 col-md-4"> ... card ... </div>
  <div class="col-12 col-md-4"> ... card ... </div>
</div>

Kriteria Penilaian

Bootstrap CDN terpasang
Grid system digunakan benar
Responsive di mobile
Minimal 3 card berbeda

Waktu: 30 menit

21

Latihan 2 — Komponen Interaktif

Estimasi waktu: 45 menit.

Instruksi

Buatlah halaman dengan Bootstrap yang memiliki:

Navbar dengan hamburger menu (responsive).
Satu tombol yang membuka Modal berisi form (nama + email + submit).
Alert sukses yang muncul setelah submit.
Carousel dengan 3 gambar (boleh pakai placeholder).

navbar-toggler data-bs-toggle="modal" carousel

Kriteria Penilaian

Modal berfungsi (buka/tutup)
Carousel berjalan otomatis
Alert dismissible
Navbar responsive

Waktu: 45 menit

22

Tugas Akhir — Mini Project

Website Company Profile 1 halaman dengan Bootstrap.

Buatlah Company Profile berisi:

Navbar — logo + menu (Home, About, Services, Contact), sticky-top, dark.
Hero — judul besar, subtitle, 2 tombol CTA, background gelap.
About — 2 kolom (kiri teks, kanan gambar).
Services — 3 card layanan dengan Bootstrap Icons.
Team — 3 card tim (foto, nama, jabatan).
Contact — form kontak (nama, email, pesan, kirim).
Footer — copyright + 3 ikon sosial media.

Deadline: pertemuan berikutnya.

Rubrik Penilaian Total 100

Navbar fungsional & responsive 15
Hero section menarik 10
About 2 kolom 10
Services 3 card 15
Team 3 card 15
Contact form 15
Footer 10
Responsif di mobile 10

Selamat Belajar & Berkarya!

BAB 7 — Bootstrap | Front-End Master Class

|

Agenda Pembelajaran

Apa itu Bootstrap?

Analogi: Gedung Mall vs Gedung dari Nol

Bootstrap dalam Kehidupan Nyata

LEGO®

Lantai Mall

Seragam

Blueprint

Container

Analogi: Bingkai Foto

Row & Column

Analogi: Meja Makan

Grid System — 12 Kolom

Analogi: Pizza 12 Potong

Breakpoint (Responsive)

Analogi: Ukuran Baju S / M / L / XL

Navbar

Analogi: Papan Nama Restoran

Card

Analogi: Kartu Undangan

Produk

Profil

ARTIKEL

Belajar Bootstrap

Button & Variants

Analogi: Tombol Lift

Modal

Analogi: Pop-up / Dialog Box

Carousel

Analogi: Instagram Story

Slide Satu

Slide Dua

Slide Tiga

Alert

Analogi: Notifikasi HP

Form Bootstrap

Analogi: Formulir Pendaftaran

Mini Project: Company Profile

Live Demo: Company Profile

Tentang Kami

Layanan

Web Design

Mobile App

Digital Marketing

Alur Kerja Bootstrap

Rangkuman & Cheat Sheet

Latihan 1 — Grid Layout

Latihan 2 — Komponen Interaktif

Tugas Akhir — Mini Project

Selamat Belajar & Berkarya!

Ini Sebuah Modal!