Pelajari Cara Membuat Situs Responsif Menggunakan Bootstrap 4

Daftar Isi

Pengantar Bootstrap 4
Persiapan Lingkungan Pengembangan
Struktur Dasar Situs dengan Bootstrap 4
Memahami Sistem Grid Bootstrap 4
Menggunakan Komponen Bootstrap 4
Kustomisasi dan Responsivitas
Contoh Situs Responsif Lengkap
Sumber Belajar dan Source Code

1. Pengantar Bootstrap 4

Bootstrap 4 adalah framework CSS yang sangat populer untuk membangun situs web yang responsif dan modern dengan cepat. Bootstrap menyediakan kumpulan komponen siap pakai, sistem grid fleksibel, dan utilitas yang memudahkan pengembangan front-end.

Dengan Bootstrap 4, Anda dapat membuat situs yang otomatis menyesuaikan tampilan pada berbagai ukuran layar, mulai dari ponsel hingga desktop, tanpa harus menulis banyak CSS dari awal.

Ilustrasi diagram sistem grid Bootstrap 4 dengan kolom dan baris berwarna berbeda

2. Persiapan Lingkungan Pengembangan

Sebelum mulai membuat situs responsif dengan Bootstrap 4, pastikan Anda sudah menyiapkan:

Editor kode seperti VS Code, Sublime Text, atau lainnya.
Koneksi internet untuk mengakses CDN Bootstrap 4.
Browser modern untuk testing (Chrome, Firefox, Edge, Safari).

Anda bisa menggunakan Bootstrap 4 melalui CDN dengan menambahkan link CSS dan script JS berikut di dalam tag head dan sebelum penutup </body> :

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<!-- Bootstrap 4 JS, Popper.js, dan jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Dengan ini, Anda sudah siap menggunakan kelas dan komponen Bootstrap 4 di proyek Anda.

3. Struktur Dasar Situs dengan Bootstrap 4

Struktur HTML dasar untuk situs Bootstrap 4 biasanya terdiri dari:

Tag <!DOCTYPE html> dan <html> dengan atribut bahasa.
Bagian <head> dengan meta tag viewport dan link CSS Bootstrap.
Bagian <body> yang berisi konten dengan kelas Bootstrap.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Judul Situs</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="container">
      <h1>Halo, Bootstrap 4!</h1>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

Kelas container membuat konten berada di tengah dengan margin responsif.

4. Memahami Sistem Grid Bootstrap 4

Sistem grid Bootstrap 4 menggunakan 12 kolom yang fleksibel untuk membuat layout responsif. Anda dapat mengatur kolom agar berubah ukuran sesuai perangkat dengan kelas seperti col-sm-6 , col-md-4 , dan lain-lain.

Contoh membuat 3 kolom yang responsif:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4 bg-primary text-white p-3">Kolom 1</div>
    <div class="col-sm-12 col-md-4 bg-success text-white p-3">Kolom 2</div>
    <div class="col-sm-12 col-md-4 bg-warning text-white p-3">Kolom 3</div>
  </div>
</div>

Kolom 1

Kolom 2

Kolom 3

Pada contoh di atas, kolom akan menumpuk pada layar kecil (sm) dan berdampingan 3 kolom pada layar medium (md) ke atas.

5. Menggunakan Komponen Bootstrap 4

Bootstrap 4 menyediakan banyak komponen siap pakai seperti tombol, navbar, card, form, dan modal yang mudah digunakan dengan kelas CSS dan sedikit JavaScript.

Contoh tombol dan card:

Gambar ilustrasi kartu Bootstrap 4 dengan judul dan teks deskriptif

Judul Card Bootstrap 4

Ini adalah contoh card Bootstrap 4 yang dapat digunakan untuk menampilkan konten dengan gambar, judul, dan deskripsi singkat.

Baca Selengkapnya

6. Kustomisasi dan Responsivitas

Bootstrap 4 memungkinkan Anda menyesuaikan tampilan dengan utilitas kelas seperti margin, padding, warna, dan display. Anda juga dapat menggunakan breakpoint responsif untuk mengatur tampilan berbeda di berbagai ukuran layar.

Contoh kustomisasi responsif:

<div class="p-4 p-md-5 bg-light text-center">
  <h2 class="mb-3">Judul Responsif</h2>
  <p class="mb-0">Paragraf dengan padding yang berbeda pada layar kecil dan besar.</p>
</div>

Judul Responsif

Paragraf dengan padding yang berbeda pada layar kecil dan besar. Pada layar kecil padding lebih kecil, dan pada layar medium ke atas padding lebih besar.

Anda juga dapat menyesuaikan tema Bootstrap dengan mengubah variabel Sass jika menggunakan build custom, atau menimpa CSS default dengan stylesheet Anda.

7. Contoh Situs Responsif Lengkap

Berikut contoh sederhana halaman situs responsif menggunakan Bootstrap 4 yang menggabungkan grid, navbar, dan card:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Contoh Situs Responsif</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-primary">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a class="nav-link" href="#">Beranda</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Tentang</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Kontak</a></li>
        </ul>
      </div>
    </nav>

    <div class="container mt-4">
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://placehold.co/400x200/png?text=Gambar+1" class="card-img-top" alt="Gambar ilustrasi produk atau konten pertama dengan latar belakang biru dan teks putih" />
            <div class="card-body">
              <h5 class="card-title">Produk 1</h5>
              <p class="card-text">Deskripsi singkat produk atau konten pertama.</p>
              <a href="#" class="btn btn-primary">Detail</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://placehold.co/400x200/png?text=Gambar+2" class="card-img-top" alt="Gambar ilustrasi produk atau konten kedua dengan latar belakang hijau dan teks putih" />
            <div class="card-body">
              <h5 class="card-title">Produk 2</h5>
              <p class="card-text">Deskripsi singkat produk atau konten kedua.</p>
              <a href="#" class="btn btn-primary">Detail</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card">
            <img src="https://placehold.co/400x200/png?text=Gambar+3" class="card-img-top" alt="Gambar ilustrasi produk atau konten ketiga dengan latar belakang oranye dan teks putih" />
            <div class="card-body">
              <h5 class="card-title">Produk 3</h5>
              <p class="card-text">Deskripsi singkat produk atau konten ketiga.</p>
              <a href="#" class="btn btn-primary">Detail</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

Anda dapat menyalin dan mengembangkan contoh ini untuk membuat situs responsif sesuai kebutuhan.