Tutorial Bootstrap 4 #22 : Jumbotron Pada Bootstrap 4


jumbotron bootstrap

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.

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

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.

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

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.

 

Demo

Download Source Code

 



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

border bootstrap 4
tooltips bootstrap 4
spinners bootstrap 4
Diskusi
Tidak Ada Komentar