Membuat Jumbotron dengan Bootstrap

Membuat Jumbotron dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat Jumbotron dengan menggunakan Bootstrap. Jumbotron Bootstrap adalah elemen penting dalam pembuatan halaman web. Ini menyoroti bagian penting dalam situs web dan membantu pengguna untuk dengan cepat mendapatkan gambaran tentang apa yang ditawarkan situs web tersebut.

Dalam istilah dasar, Jumbotron berfungsi sebagai penanda atau papan iklan besar yang menyoroti pesan atau tindakan tertentu.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Jumbotron</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="jumbotron">
    <h1 class="display-4">Selamat Datang!</h1>
    <p class="lead">Ini adalah contoh Jumbotron menggunakan Bootstrap.</p>
    <hr class="my-4">
    <p>Bootstrap adalah framework CSS yang populer untuk membangun tampilan website yang responsif dan menarik.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Pelajari Lebih Lanjut</a>
  </div>

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

Selamat Datang!

Ini adalah contoh Jumbotron menggunakan Bootstrap.

Bootstrap adalah framework CSS yang populer untuk membangun tampilan website yang responsif dan menarik.

Pelajari Lebih Lanjut

Silakan salin kode di atas ke file HTML Anda dan lihat hasilnya. Anda akan melihat Jumbotron dengan teks dan tombol yang sesuai dengan contoh di atas.

Jumbotron adalah komponen Bootstrap yang digunakan untuk menampilkan pesan utama atau konten yang menonjol di halaman web Anda. Dalam contoh di atas, kita menggunakan kelas jumbotron untuk menggambarkan elemen utama Jumbotron. Kemudian, kita menggunakan kelas display-4 untuk judul utama, lead untuk teks deskripsi, dan btn btn-primary btn-lg untuk tombol.

Pastikan Anda juga menyertakan tautan ke file CSS Bootstrap dan file JavaScript yang diperlukan untuk Bootstrap bekerja dengan baik.

Semoga contoh ini membantu Anda memahami cara membuat Jumbotron menggunakan Bootstrap dan menerapkannya pada HTML Anda. Selamat mencoba!

Artikel Terbaru ⭐