Tutorial Belajar Bootstrap 4 Part 9 – Membuat Jumbotron dengan bootstrap

Selamat datang lagi di warungbelajar, dalam tutorial ini kita masih membahas tutorial mengenai bootstrap 4, jika dalam tutorial sebelumnya kita sudah membahas mengenai bagaimana cara merubah warna text dengan bootstrap, dalam tutorial ini kita akan membahas mengenai jumbotron dalam bootstrap 4.

Jumbotron adalah fitur yang diberikan oleh bootstrap yang digunakan untuk menampilkan pengumuman, konten khusus, atau semacam informasi yang ditampilkan pada halaman website.
Jumbotron biasanya diletakkan di halaman depan sebuah website,warna default dari jumbotron pada bootstrap adalah abu – abu, nah nanti isi dalam jumbotron bisa anda set sesuai kebutuhan website anda.

Cara membuat jumbotron boostrap 4

Untuk membuat jumbotron dengan boostrap 4 anda memerlukan class .jumbotron yang bisa anda gunakan pada tag <div>, baik untuk contoh perhatikan skrip berikut ini :

Semisal kita simpan dengan nama jumbotron.html, maka hasilnya jika dibuka dibrowser adalah :

Keterangan :

• untuk menampilkan jumbotron kita harus menambahkan class jumbotron pada bagian tag <div>, anda bisa memodifikasi isi didalam jumbotron

Membuat Full-width Jumbotron

Anda juga bisa membuat jumbotron dengan ukuran full width (lebarnya full) dan menghilangkan lenkungan pada bagian sudut dari jumbotron.

untuk contoh perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama full_width_bootstrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• anda bisa menambahkan class jumbotron-fluid pada tag <div>, baru didalamnya kita buat tag <div> dengan class container, jadi ini ada kebalikan dari contoh sebelumnya.

Baik itu dulu teman – teman pembahasan mengenai cara membuat jumbotron dengan menggunakan bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial bootstrap selanjutnya.