#Bootstrap 4

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.

<h1>Halo, selamat datang!</h1>

<p class="lead">Ini adalah contoh tampilan jumbotron sederhana, Yang kita buat dengan menggunakan bootstrap 4.</p>

<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.

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.

<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>

Pada contoh ini kita menerapkan class .container di dalam class .jumbotron, agar isi dari jumbotron lebih masuk ke bagian dalam.

Baca juga :

Tutorial Bootstrap 4 #3 : Container Pada Bootstrap 4

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.

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.