Membuat Jumbotron pada Bootstrap 4

Jumbotron merupakan sebuah kotak berwarna Abu-Abu agar dapat terlihat lebih menonjol yang biasa digunakan pada konten yang berisi informasi spesial.

Tips: Didalam Jumbotron, kita dapat meletakkan elemen HTML yang valid, termasuk elemen/class Bootstrap lainnya.

Jumbotron Bootstrap 4

Untuk membuat Jumbotron, kita dapat menggunakan elemen <div> dengan class .jumbotron. Berikut adalah contohnya:

<div class="jumbotron">
    <h1>Tutorial Bootstrap EL Creative Academy</h1>
    <p>Bootstrap adalah salah satu HTML, CSS, dan JS Framework yang paling terkenal yang biasa digunakan untuk mengembangkan Project Responsive dan Mobile-First pada Web.</p>
</div>

Lihat kode di Github | Lihat Live Demo

Full-Width Jumbotron

Jika kalian ingin membuat Jumbotron yang lebarnya 100% dan tanpa Rounded Corner/Border, kalian dapat menambahkan class .jumbotron-fluid dan .container atau .container-fluid. Berikut adalah contohnya:

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Tutorial Bootstrap EL Creative Academy</h1>
        <p>Bootstrap adalah salah satu HTML, CSS, dan JS Framework yang paling terkenal yang biasa digunakan untuk mengembangkan Project Responsive dan Mobile-First pada Web.</p>
    </div>
</div>

Lihat kode di Github | Lihat Live Demo

0 Komentar