Tutorial Bootstrap 4 #22 : Jumbotron Pada Bootstrap 4

Jumbotron Pada Bootstrap 4 – Selamat datang kembali di materi tutorial belajar bootstrap 4 dari dasar sampai mahir di www.malasngoding.com.
Pada tutorial bootstrap 4 kali ini akan dibahas tentang sebuah komponen lagi dari bootstrap 4. yaitu komponen jumbotron.
Jumbotron Pada Bootstrap 4
Jumbotron adalah sebuah komponen yang ringan dan fleksibel yang disediakan oleh bootstrap. untuk menampilkan konten yang diunggulkan pada sebuah halaman website.
Biasanya pesan yang ingin disampaikan ke pengunjung website, dibuat menggunakan jumbotron, agar lebih terlihat dan mendapat perhatian dari pengunjung website.
Misalnya pemilik website menyediakan jasa atau produk unggulan yang ingin ditawarkan pada websitenya, nah jumbotron menjadi salah satu pilihan sebagai tempat untuk membuat menampilkan pesan pemasaran utama ini.
Membuat Jumbotron Menggunakan Bootstrap 4
Untuk membuat jumbotron, caranya sangat mudah. perhatikan contoh berikut.
1 2 3 4 5 6 7 |
<div class="jumbotron"> <h1>Halo, selamat datang!</h1> <p class="lead">Ini adalah contoh tampilan jumbotron sederhana, Yang kita buat dengan menggunakan bootstrap 4.</p> <hr class="my-4"> <p>Silahkan klik tombol berikut untuk melihat tutorial lengkap tentang jumbotron di bootstrap 4.</p> <a class="btn btn-primary btn-lg" href=" https://www.malasngoding.com/jumbotron-pada-bootstrap-4/">Selengkapnya</a> </div> |
perhatikan contoh jumbotron di atas, untuk membuat jumbotron, kita bisa menggunakan class .jumbotron. kemudian di dalam elemennya kita isi dengan sesuka kita. pada contoh ini saya mengisi dengan tag <h1> .. </h1>. dan beberapa tag <p> .. </p> untuk membuat paragraf.
Saya juga menerapkan tombol di dalamnya, yang mana ketika tombol atau hyperlink tersebut diklik, maka halaman akan dialihkan ke tutorial jumbotron bootstrap ini.
Baca juga :
Jalankan dan lihat hasilnya.

jumbotron pada bootstrap 4
Gambar di atas adalah hasil dari tampilan jumbotron, biasanya jumbotron diletakkan dibawah menu navigasi di halaman utama. untuk membuat menu navigasi atau menu navbar akan kita bahas pada tutorial bootstrap 4 selanjutnya di www.malasngoding.com. 🙂
Jumbotron Fluid
Untuk membuat jumbotron yang memiliki lebar penuh. kita bisa menggunakan class .jumbotron-fluid. class .jumbotron-fluid ini harus diletakkan setara dengan class .jumbotron.
1 2 3 4 5 6 |
<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Contoh Jumbotron-Fluid</h1> <p>Ini adalah contoh dari jumbotron fluid. hanya sedikit modifikasi dengan menambahkan class .jumbotron-fluid.</p> </div> </div> |
Pada contoh ini kita menerapkan class .container di dalam class .jumbotron, agar isi dari jumbotron lebih masuk ke bagian dalam.
Baca juga :
Dan hasilnya.

jumbotron bootstrap 4
Oke sekian tutorial tentang jumbotron bootstrap 4.
Pastikan teman-teman masih mengikuti tutorial bootstrap 4 selanjutnya di www.malasngoding.com. karena pada seri tutorial bootstrap 4 ini kita akan membahas bootstrap 4 secara jelas dan lengkap.
Tutorial Menarik Lainnya

Tutorial Bootstrap 4 #35 : Border Bootstrap 4


Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4


Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4

