Praktikum: Bootstrap 5

Bootstrap adalah sebuah framework CSS yang dibuat untuk mengembangkan website dengan desain yang responsif. Versi Bootstrap saat ini 5.3.8. Prasyarat: Pemahaman dasar HTML & CSS

Bootstrap : https://getbootstrap.com/

Dokumentasi : https://getbootstrap.com/docs/5.3/getting-started/introduction/

🎯 Tujuan Pembelajaran

Setelah menyelesaikan praktikum ini, mahasiswa mampu:

Memahami dan menerapkan Grid System Bootstrap 5
Menggunakan class-class Image pada Bootstrap 5
Membangun Responsive Web Design yang optimal di Desktop, Tablet, dan HP

🚀 Persiapan: Setup Proyek Bootstrap 5

Langkah 1 — Buat File HTML

Buat file index.html baru dengan struktur dasar berikut:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Praktikum Bootstrap 5</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" 
          crossorigin="anonymous">
  </head>
  <body>

    <h1>Hello, Bootstrap!</h1>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" 
            crossorigin="anonymous"></script>
  </body>
</html>

Tag <meta name="viewport" content="width=device-width, initial-scale=1"> wajib ada agar responsive design berfungsi di perangkat mobile.

Langkah 2 — Buka di Browser

Buka file index.html di browser. Jika teks "Hello, Bootstrap!" tampil dengan font yang berbeda dari default browser, berarti Bootstrap berhasil dimuat.

📐 Bagian 1: Grid System

Konsep Dasar

Bootstrap menggunakan sistem grid 12 kolom. Setiap baris dibungkus dalam class .row, dan kolom ditentukan dengan class .col-*.

|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  | 10  | 11  | 12  |
|_____|_____|_____|_____|_____|_____|_____|_____|_____|_____|_____|_____|

Struktur wajib:

.container → .row → .col-*

Langkah 3 — Grid Equal Width

Tambahkan kode berikut di dalam <body>:

<div class="container mt-4">
  <h2>Grid Equal Width</h2>
  <!-- Tanpa angka: kolom otomatis sama lebar -->
  <div class="row">
    <div class="col">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe; border-radius: 5px;">
        Kolom 1
      </div>
    </div>
    <div class="col">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe; border-radius: 5px;">
        Kolom 2
      </div>
    </div>
    <div class="col">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe; border-radius: 5px;">
        Kolom 3
      </div>
    </div>
  </div>
</div>

Class .col tanpa angka akan membagi lebar secara otomatis dan sama rata.

Langkah 4 — Grid Dengan Angka

Gunakan angka setelah col- untuk menentukan proporsi lebar. Total harus = 12.

<div class="container mt-4">
  <h2>Grid Dengan Angka</h2>
  
  <!-- Contoh 1: 4 + 8 = 12 -->
  <div class="row mb-3">
    <div class="col-4">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-4 (1/3 lebar)</div>
    </div>
    <div class="col-8">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-8 (2/3 lebar)</div>
    </div>
  </div>
  
  <!-- Contoh 2: 6 + 6 = 12 -->
  <div class="row mb-3">
    <div class="col-6">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-6 (setengah)</div>
    </div>
    <div class="col-6">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-6 (setengah)</div>
    </div>
  </div>
  
  <!-- Contoh 3: 3 + 6 + 3 = 12 -->
  <div class="row">
    <div class="col-3">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-3</div>
    </div>
    <div class="col-6">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-6</div>
    </div>
    <div class="col-3">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">col-3</div>
    </div>
  </div>
</div>

Langkah 5 — Grid Responsive (Breakpoints)

Ini adalah fitur paling penting dari grid Bootstrap. Kita bisa menentukan lebar kolom berbeda untuk setiap ukuran layar.

Tabel Breakpoints:

Class

Ukuran Layar

Contoh Device

.col-

< 576px

HP Portrait

.col-sm-

≥ 576px

HP Landscape

.col-md-

≥ 768px

Tablet

.col-lg-

≥ 992px

Desktop

.col-xl-

≥ 1200px

Desktop Besar

.col-xxl-

≥ 1400px

Layar Sangat Besar

<div class="container mt-4">
  <h2>Grid Responsive</h2>
  <p><strong>Coba resize browser Anda!</strong></p>
  
  <div class="row">
    <!-- Di HP: full width (12), Tablet: setengah (6), Desktop: seperempat (3) -->
    <div class="col-12 col-md-6 col-lg-3">
      <div style="background: #d1e7dd; padding: 15px; border: 1px solid #a3cfbb; margin-bottom: 10px;">
        Card 1
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div style="background: #d1e7dd; padding: 15px; border: 1px solid #a3cfbb; margin-bottom: 10px;">
        Card 2
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div style="background: #d1e7dd; padding: 15px; border: 1px solid #a3cfbb; margin-bottom: 10px;">
        Card 3
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div style="background: #d1e7dd; padding: 15px; border: 1px solid #a3cfbb; margin-bottom: 10px;">
        Card 4
      </div>
    </div>
  </div>
</div>

Penjelasan perilakunya:

Ukuran Layar

Layout

Visualisasi

🖥️ Desktop (≥992px)

4 kolom sejajar

[1] [2] [3] [4]

📟 Tablet (≥768px)

2 kolom per baris

[1] [2] lalu [3] [4]

📱 HP (<768px)

1 kolom (full width)

[1] lalu [2] lalu [3] lalu [4]

Langkah 6 — Nesting Grid

Grid bisa ditempatkan di dalam grid lain.

<div class="container mt-4">
  <h2>Nesting Grid</h2>
  <div class="row">
    <div class="col-md-8" style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe;">
      <strong>col-md-8 (Parent)</strong>
      <!-- Grid di dalam grid -->
      <div class="row mt-2">
        <div class="col-6">
          <div style="background: #fff3cd; padding: 10px; border: 1px solid #ffecb5;">Nested col-6</div>
        </div>
        <div class="col-6">
          <div style="background: #fff3cd; padding: 10px; border: 1px solid #ffecb5;">Nested col-6</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe; height: 100%;">
        col-md-4
      </div>
    </div>
  </div>
</div>

Langkah 7 — Offset (Menggeser Kolom)

Gunakan .offset-md-* untuk menggeser kolom ke kanan.

<div class="container mt-4">
  <h2>Offset</h2>
  <div class="row">
    <div class="col-md-4 offset-md-4">
      <div style="background: #e7f1ff; padding: 15px; border: 1px solid #b6d4fe; text-align: center;">
        col-md-4 offset-md-4 (posisi tengah)
      </div>
    </div>
  </div>
</div>

🖼️ Bagian 2: Image

Langkah 8 — Responsive Image

Class .img-fluid membuat gambar otomatis menyesuaikan lebar container-nya.

<div class="container mt-4">
  <h2>Responsive Image</h2>
  <div class="row">
    <div class="col-md-8">
      <!-- .img-fluid = max-width: 100% + height: auto -->
      <img src="https://picsum.photos/800/400?random=1" 
           class="img-fluid rounded" 
           alt="Responsive image">
      <p class="text-muted mt-1"><small>Gambar ini menyesuaikan ukuran container</small></p>
    </div>
  </div>
</div>

Selalu gunakan .img-fluid pada gambar dalam layout responsif agar gambar tidak meluap dari container.

Langkah 9 — Image Thumbnail

Class .img-thumbnail menambahkan border dan padding pada gambar.

<div class="container mt-4">
  <h2>Image Thumbnail</h2>
  <div class="row">
    <div class="col-6 col-md-3">
      <img src="https://picsum.photos/300/300?random=2" 
           class="img-thumbnail" 
           alt="Thumbnail 1">
    </div>
    <div class="col-6 col-md-3">
      <img src="https://picsum.photos/300/300?random=3" 
           class="img-thumbnail" 
           alt="Thumbnail 2">
    </div>
  </div>
</div>

Langkah 10 — Rounded & Circle Image

<div class="container mt-4">
  <h2>Rounded & Circle Image</h2>
  <div class="row align-items-center">
    <div class="col-6 col-md-3 text-center">
      <img src="https://picsum.photos/200/200?random=4" 
           class="rounded img-fluid" alt="Rounded">
      <p class="mt-1"><code>.rounded</code></p>
    </div>
    <div class="col-6 col-md-3 text-center">
      <img src="https://picsum.photos/200/200?random=5" 
           class="rounded-circle img-fluid" alt="Circle">
      <p class="mt-1"><code>.rounded-circle</code></p>
    </div>
  </div>
</div>

Ringkasan class image:

Class

Fungsi

.img-fluid

Gambar responsif (max-width 100%)

.img-thumbnail

Tambah border + padding

.rounded

Sudut membulat

.rounded-circle

Bentuk lingkaran

Langkah 11 — Figure (Gambar + Caption)

<div class="container mt-4">
  <h2>Figure</h2>
  <figure class="figure">
    <img src="https://picsum.photos/600/300?random=6" 
         class="figure-img img-fluid rounded" alt="Figure">
    <figcaption class="figure-caption text-center">
      Ini adalah contoh caption pada sebuah figure.
    </figcaption>
  </figure>
</div>

Langkah 12 — Gallery Image dengan Grid

Kombinasi Grid + Image untuk membuat galeri yang responsif.

<div class="container mt-4">
  <h2>Gallery Responsif</h2>
  <!-- g-3 = gap/jarak antar kolom -->
  <div class="row g-3">
    <div class="col-6 col-md-4 col-lg-3">
      <img src="https://picsum.photos/400/300?random=10" 
           class="img-fluid rounded shadow-sm" alt="Gallery 1">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="https://picsum.photos/400/300?random=11" 
           class="img-fluid rounded shadow-sm" alt="Gallery 2">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="https://picsum.photos/400/300?random=12" 
           class="img-fluid rounded shadow-sm" alt="Gallery 3">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img src="https://picsum.photos/400/300?random=13" 
           class="img-fluid rounded shadow-sm" alt="Gallery 4">
    </div>
  </div>
</div>

📱 Bagian 3: Responsive Web Design

Konsep Mobile First

Bootstrap menggunakan pendekatan Mobile First — artinya:

Desain dimulai dari layar terkecil (HP)
Lalu ditambahkan aturan untuk layar yang lebih besar

Prinsip RWD: Satu website, tampil optimal di semua ukuran layar — Desktop, Tablet, dan HP.

Langkah 13 — Display Utility (Show/Hide per Device)

Gunakan class d-none dan d-{breakpoint}-block untuk mengontrol elemen mana yang tampil di device tertentu.

<div class="container mt-4">
  <h2>Display Utility</h2>

  <!-- Hanya muncul di HP (< 768px) -->
  <div class="p-3 bg-danger text-white rounded d-block d-md-none mb-2">
    📱 <strong>Ini hanya terlihat di HP</strong>
  </div>

  <!-- Hanya muncul di Tablet (768px - 991px) -->
  <div class="p-3 bg-warning rounded d-none d-md-block d-lg-none mb-2">
    📟 <strong>Ini hanya terlihat di Tablet</strong>
  </div>

  <!-- Hanya muncul di Desktop (≥ 992px) -->
  <div class="p-3 bg-success text-white rounded d-none d-lg-block mb-2">
    🖥️ <strong>Ini hanya terlihat di Desktop</strong>
  </div>
</div>

Penjelasan logika:

Element

Class

Tablet

Desktop

Merah

d-block d-md-none

✅ Tampil

❌ Hidden

Kuning

d-none d-md-block d-lg-none

❌ Hidden

✅ Tampil

❌ Hidden

Hijau

d-none d-lg-block

❌ Hidden

✅ Tampil

Langkah 14 — Responsive Text Alignment

<div class="container mt-4">
  <h2>Responsive Text</h2>
  <!-- Tengah di HP, Kiri di Tablet ke atas -->
  <p class="text-center text-md-start" 
     style="background: #e7f1ff; padding: 15px;">
    Teks ini tengah di HP, kiri di Tablet+
  </p>
  <!-- Kiri di HP/Tablet, Tengah di Desktop -->
  <p class="text-start text-lg-center" 
     style="background: #e7f1ff; padding: 15px;">
    Teks ini kiri di HP/Tablet, tengah di Desktop
  </p>
</div>

Navbar Bootstrap otomatis berubah menjadi hamburger menu di layar kecil.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">🎓 Praktikum Web</a>
    <!-- Tombol hamburger: muncul di layar < lg (992px) -->
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Menu: collapse di layar kecil, expand di layar besar -->
    <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>

navbar-expand-lg berarti navbar akan collapse (jadi hamburger) di layar kurang dari 992px.

Langkah 16 — Jenis Container

Class

Perilaku

.container

Lebar fixed, berubah tiap breakpoint

.container-fluid

Selalu full width (100%)

.container-{breakpoint}

Full width sampai breakpoint tertentu

🏆 Bagian 4: Latihan Akhir — Portfolio Card Responsif

Gabungkan semua konsep (Grid + Image + Responsive) untuk membangun layout portfolio card.

Langkah 17 — Buat Portfolio Card

<div class="container mt-4">
  <h2>Portfolio Saya</h2>
  <div class="row g-4">

    <!-- Card 1 -->
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://picsum.photos/400/250?random=20" 
             class="card-img-top" alt="Project 1">
        <div class="card-body">
          <h5 class="card-title">Website Toko Online</h5>
          <p class="card-text">Website e-commerce responsif dengan fitur keranjang belanja.</p>
          <span class="badge bg-primary me-1">HTML</span>
          <span class="badge bg-success me-1">CSS</span>
          <span class="badge bg-warning text-dark">Bootstrap</span>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://picsum.photos/400/250?random=21" 
             class="card-img-top" alt="Project 2">
        <div class="card-body">
          <h5 class="card-title">Landing Page Startup</h5>
          <p class="card-text">Landing page modern dengan animasi scroll dan layout responsif.</p>
          <span class="badge bg-primary me-1">HTML</span>
          <span class="badge bg-success me-1">CSS</span>
          <span class="badge bg-info text-dark">JavaScript</span>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="col-12 col-sm-6 col-lg-4">
      <div class="card h-100 shadow-sm">
        <img src="https://picsum.photos/400/250?random=22" 
             class="card-img-top" alt="Project 3">
        <div class="card-body">
          <h5 class="card-title">Dashboard Admin</h5>
          <p class="card-text">Panel admin dengan sidebar responsif dan grafik interaktif.</p>
          <span class="badge bg-primary me-1">HTML</span>
          <span class="badge bg-danger me-1">SASS</span>
          <span class="badge bg-warning text-dark">Bootstrap</span>
        </div>
      </div>
    </div>

  </div>
</div>

Perilaku responsive card:

Device

Class Aktif

Layout

📱 HP (< 576px)

col-12

1 card per baris

📱 HP Landscape (≥ 576px)

col-sm-6

2 card per baris

🖥️ Desktop (≥ 992px)

col-lg-4

3 card per baris

📝 Rangkuman

Grid System

Sistem 12 kolom: .container → .row → .col-*
Equal width: .col (otomatis sama rata)
Fixed width: .col-{angka} (total = 12)
Responsive: .col-{breakpoint}-{angka}

Image

.img-fluid — Gambar responsif
.img-thumbnail — Gambar dengan border
.rounded / .rounded-circle — Sudut membulat / lingkaran
<figure> + .figure-img + .figure-caption

Responsive Web Design

Mobile First — Desain dari layar kecil ke besar
Breakpoints: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px)
Display: d-none, d-{bp}-block untuk show/hide
Container: .container (fixed) vs .container-fluid (full width)

📚 Referensi

Tugas: Buatlah halaman portfolio pribadi yang responsif menggunakan semua konsep di atas (Grid, Image, dan Responsive). Halaman harus tampil optimal di Desktop, Tablet, dan HP.

PreviousBootstrap NextPengenalan Hak Cipta

Last updated 13 days ago

hashtag🎯 Tujuan Pembelajaran

hashtag🚀 Persiapan: Setup Proyek Bootstrap 5

hashtagLangkah 1 — Buat File HTML

hashtagLangkah 2 — Buka di Browser

hashtag📐 Bagian 1: Grid System

hashtagKonsep Dasar

hashtagLangkah 3 — Grid Equal Width

hashtagLangkah 4 — Grid Dengan Angka

hashtagLangkah 5 — Grid Responsive (Breakpoints)

hashtagLangkah 6 — Nesting Grid

hashtagLangkah 7 — Offset (Menggeser Kolom)

hashtag🖼️ Bagian 2: Image

hashtagLangkah 8 — Responsive Image

hashtagLangkah 9 — Image Thumbnail

hashtagLangkah 10 — Rounded & Circle Image

hashtagLangkah 11 — Figure (Gambar + Caption)

hashtagLangkah 12 — Gallery Image dengan Grid

hashtag📱 Bagian 3: Responsive Web Design

hashtagKonsep Mobile First

hashtagLangkah 13 — Display Utility (Show/Hide per Device)

hashtagLangkah 14 — Responsive Text Alignment

hashtagLangkah 15 — Responsive Navbar

hashtagLangkah 16 — Jenis Container

hashtag🏆 Bagian 4: Latihan Akhir — Portfolio Card Responsif

hashtagLangkah 17 — Buat Portfolio Card

hashtag📝 Rangkuman

hashtagGrid System

hashtagImage

hashtagResponsive Web Design

hashtag📚 Referensi

🎯 Tujuan Pembelajaran

🚀 Persiapan: Setup Proyek Bootstrap 5

Langkah 1 — Buat File HTML

Langkah 2 — Buka di Browser

📐 Bagian 1: Grid System

Konsep Dasar

Langkah 3 — Grid Equal Width

Langkah 4 — Grid Dengan Angka

Langkah 5 — Grid Responsive (Breakpoints)

Langkah 6 — Nesting Grid

Langkah 7 — Offset (Menggeser Kolom)

🖼️ Bagian 2: Image

Langkah 8 — Responsive Image

Langkah 9 — Image Thumbnail

Langkah 10 — Rounded & Circle Image

Langkah 11 — Figure (Gambar + Caption)

Langkah 12 — Gallery Image dengan Grid

📱 Bagian 3: Responsive Web Design

Konsep Mobile First

Langkah 13 — Display Utility (Show/Hide per Device)

Langkah 14 — Responsive Text Alignment

Langkah 15 — Responsive Navbar

Langkah 16 — Jenis Container

🏆 Bagian 4: Latihan Akhir — Portfolio Card Responsif

Langkah 17 — Buat Portfolio Card

📝 Rangkuman

Grid System

Image

Responsive Web Design

📚 Referensi