Dulu, Jumbotron adalah komponen khas di Bootstrap yang digunakan untuk menarik perhatian ke konten atau informasi tertentu. Bentuknya berupa kotak abu-abu besar dengan sudut membulat. Namun, sejak Bootstrap 5, komponen Jumbotron secara resmi telah dihapus.

Tapi jangan khawatir! Kita masih bisa membuat elemen serupa—bahkan lebih fleksibel—dengan menggunakan kelas-kelas utilitas Bootstrap. Cara ini justru memberi kita lebih banyak kebebasan untuk berkreasi. Mari kita lihat caranya.

Struktur Dasar Jumbotron Modern

Untuk membuat “jumbotron” di Bootstrap 5, kita cukup menggabungkan beberapa kelas utilitas pada sebuah elemen <div>. Struktur dasarnya sangat sederhana.

Kita akan menggunakan kelas-kelas berikut:

• container atau container-fluid: Untuk membungkus konten kita.
• p-5 (atau p-4, p-3): Untuk memberikan padding (ruang di dalam) yang besar.
• mb-4 (atau mb- lainnya): Untuk memberikan margin-bottom (jarak di bawah).
• bg-light: Untuk memberikan warna latar belakang abu-abu terang, mirip jumbotron lama.
• rounded-3: Untuk memberikan sudut yang sedikit membulat.

Contoh Kode Dasar:

<div class="container py-5">
  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Jumbotron Kustom</h1>
      <p class="col-md-8 fs-4">Ini adalah contoh jumbotron yang dibuat menggunakan kelas utilitas Bootstrap 5. Lebih fleksibel dan mudah diatur!</p>
      <button class="btn btn-primary btn-lg" type="button">Contoh Tombol</button>
    </div>
  </div>
</div>

Hasilnya akan terlihat seperti ini:

Kode di atas menciptakan sebuah blok besar dengan latar belakang terang, teks yang menonjol, dan sebuah tombol ajakan (call-to-action).

Kustomisasi Tingkat Lanjut

Kelebihan utama menggunakan kelas utilitas adalah kemudahan kustomisasi. Anda bisa mengubah hampir semua aspeknya tanpa menulis CSS tambahan.

Jumbotron dengan Gambar Latar

Membuat jumbotron dengan gambar latar belakang akan membuatnya jauh lebih menarik. Caranya adalah dengan menambahkan sedikit CSS inline atau internal.

1. Siapkan <div> pembungkus dengan gaya CSS untuk background-image.
2. Tambahkan overlay agar teks lebih mudah dibaca.

Contoh Kode dengan Gambar Latar:

<div class="container py-5">
  <div
    class="p-5 text-center bg-image rounded-3"
    style="
      background-image: url('https://source.unsplash.com/1600x900/?nature,water');
      height: 400px;
    "
  >
    <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div class="text-white">
          <h1 class="mb-3">Selamat Datang!</h1>
          <h4 class="mb-3">Jelajahi Dunia Bersama Kami</h4>
          <a class="btn btn-outline-light btn-lg" href="#!" role="button">Mulai Petualangan</a>
        </div>
      </div>
    </div>
  </div>
</div>

Pada contoh ini:

• Kita menggunakan CSS style untuk mengatur background-image.
• Sebuah <div> dengan kelas .mask ditambahkan untuk membuat lapisan (overlay) hitam transparan (rgba(0, 0, 0, 0.6)).
• Kelas Flexbox (d-flex, justify-content-center, align-items-center) digunakan untuk menempatkan teks tepat di tengah secara vertikal dan horizontal.
• Warna teks diubah menjadi putih (text-white) agar kontras dengan latar belakang gelap.

Dengan pendekatan modern ini, membuat “jumbotron” di Bootstrap tidak hanya mudah, tetapi juga memberikan ruang tak terbatas untuk kreativitas sesuai kebutuhan desain website Anda.