Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 25 : Cara Membuat Spinner di Bootstrap, selanjutnya kita akab belajar cara membuat jumbotron di Bootstrap.
Komponen jumbotron Bootstrap menyediakan cara terbaik untuk menampilkan konten atau informasi utama pada halaman web.
Cukup bungkus konten unggulan Anda seperti judul, deskripsi, dll dalam elemen <div> dan terapkan class .jumbotron di dalamnya.
<div class="jumbotron">
<h1>Belajar Membuat Website</h1>
<p class="lead"> Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwp.com" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari inti dari teknologi pengembangan web, lengkap dengan contoh praktik dalam kehidupan nyata, sehingga Anda dapat membuat web sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
<p><a href="https://mbahwp.com" target="_blank" class="btn btn-primary btn-lg" rel="noopener">Mulai belajar sekarang</a></p>
</div>
Membuat Jumbotron Lebar Halaman Penuh
Untuk membuat jumbotron tanpa sudut membulat dan menutupi seluruh lebar viewport, letakkan di luar semua container, tambahkan class pengubah .jumbotron-fluid di atasnya, dan tambahkan .container atau .container-fluid di dalamnya, seperti yang ditunjukkan pada contoh berikut:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1> Belajar Membuat Website</h1>
<p class="lead">Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwp.com" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari inti dari teknologi pengembangan web, lengkap dengan contoh praktik dalam kehidupan nyata, sehingga Anda dapat membuat web sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
<p><a href="https://mbahwp.com" target="_blank" class="btn btn-primary btn-lg" rel="noopener">Mulai belajar sekarang </a></p>
</div>
</div>
Semoga tutorial ini membantu Anda belajar cara mebuat jumbotron di Bootstrap.
