Apa itu Jumbotron? Bagaimana Cara Menggunakannya?

Cara Menggunakan Bootstrap
5/5 (33)
Bootstrap

Apa itu Jumbotron?

Apa itu Jumbotron? – Pada artikel kali ini belajar menggunakan Jumbotron pada Bootstrap. Apa itu Jumbotron? Jumbotron adalah satu element yang dibuat untuk tujuan membuat semacam pengumuman,konten khusus atau informasi tentang halaman website.

Sekarang, hampir tiap website menggunakan Jumbotron pada halaman depan mereka. Biasanya Jumbotron ini berwarna grey atau lebih gelap dari warna template website tersebut.

Baca juga: Contoh dan Cara Penggunaan Gambar pada Bootstrap.

TIP: Di dalam Jumbotron, kita bisa menambahkan script valid HTML, termasuk element dan/atau class lainnya.

Bagaimana Menggunakan Jumbotron pada Bootstrap?

Kita bisa memanggil class ini menggunakan element <code<<div>, lebih jelasnya mari kita praktekkan.
Buat satu file HTML, lalu pastekan kode berikut.

<!-- Jangan lupa memanggil Bootstrap -->
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial | codelatte.org</h1>
<p>Belajar menggunakan <code>Jumbotron</code>pada Bootstrap.</p>
</div>
</div>

Maka hasilnya akan menjadi seperti ini,

Contoh Penggunaan Jumbotron

Contoh Penggunaan Jumbotron

Kita juga bisa membuat tampilan Jumbotron agar memenuhi layar. Caranya? Lihat contoh dibawah,

See the Pen Contoh Penggunaan Jumbotron | codelatte.org by Abay (@abaykan) on CodePen.

Sekian pembahasan tentang Jumbotron, semoga bermanfaat dan apabila masih bingung atau ada pertanyaan, silahkan tinggalkan komentar dibawah.

Please rate this