Dulu, Jumbotron adalah salah satu komponen ikonik di Bootstrap yang digunakan untuk membuat blok konten besar sebagai sorotan utama di halaman web—seringkali di bagian atas (hero section). Namun, ada perubahan besar yang perlu Anda ketahui.

Perubahan Penting di Bootstrap 5: Jumbotron Dihapus!

Ya, Anda tidak salah baca. Mulai dari Bootstrap 5, komponen Jumbotron secara resmi telah dihapus. Alasan utamanya adalah Bootstrap 5 lebih fokus pada penggunaan utility classes yang memberikan fleksibilitas lebih besar kepada developer.

Jadi, bagaimana cara kita membuat tampilan seperti Jumbotron di versi terbaru? Jawabannya adalah dengan merangkai beberapa utility class untuk menciptakan efek yang sama, bahkan dengan kontrol yang lebih baik.

Cara Membuat Efek Jumbotron di Bootstrap 5

Membuat “Jumbotron” versi modern sebenarnya sangat mudah. Kita hanya perlu sebuah <div> dan mengombinasikan kelas untuk padding, background, dan bentuk.

Mari kita buat Jumbotron dasar yang paling umum, yaitu dengan latar belakang abu-abu dan sudut yang sedikit membulat.

Kelas yang digunakan:

• .container atau .container-fluid: Sebagai pembungkus utama.
• .p-5 atau .p-4: Memberikan padding (ruang di dalam elemen) yang besar. Angka 5 adalah yang terbesar.
• .bg-light: Memberikan warna latar belakang abu-abu terang.
• .rounded-3: 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 tampilan seperti Jumbotron yang dibuat menggunakan utility classes di Bootstrap 5. Kita bisa mengatur padding, background, dan teks dengan lebih leluasa.
      </p>
      <button class="btn btn-primary btn-lg" type="button">Contoh Tombol</button>
    </div>
  </div>
</div>

Pada contoh di atas, kita menggunakan div luar untuk mengatur posisi dan div dalam untuk styling Jumbotron itu sendiri. Hasilnya akan sangat mirip dengan komponen Jumbotron di Bootstrap 4.

Kustomisasi Jumbotron

Kelebihan menggunakan utility class adalah kemudahan dalam kustomisasi. Anda tidak lagi terikat dengan gaya Jumbotron yang kaku.

Jumbotron Berwarna

Ingin Jumbotron dengan warna primer? Cukup ganti .bg-light dengan .bg-primary dan tambahkan .text-white agar teksnya kontras dan mudah dibaca.

<div class="p-5 mb-4 bg-primary text-white rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Jumbotron Biru Keren!</h1>
    <p class="col-md-8 fs-4">
      Dengan mengganti kelas background dan teks, kita bisa membuat Jumbotron yang lebih menarik dan sesuai dengan tema website kita.
    </p>
    <button class="btn btn-dark btn-lg" type="button">Tombol Lain</button>
  </div>
</div>

Meskipun komponen Jumbotron sudah tidak ada, esensinya tetap hidup melalui kombinasi utility classes. Cara baru ini justru memberdayakan kita untuk membangun elemen visual yang lebih kreatif dan fleksibel sesuai kebutuhan desain. Selamat mencoba! 🚀