Menampilkan Konten dengan Jumbotron
Komponen jumbotron Bootstrap menyediakan cara terbaik untuk menampilkan konten atau informasi utama pada halaman web. Cukup bungkus (wrap) konten unggulan kalian seperti tajuk, deskripsi, dll. Dalam elemen <div> dan terapkan kelas .jumbotron di atasnya.
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
<p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Full Page Width Jumbotron
Untuk membuat jumbotron tanpa sudut bundar dan yang menutupi full width dari viewport, letakkan semuanya di luar container (kotak), tambahkan kelas pengubah .jumbotron-fluid di dalamnya, dan tambahkan .container atau .container-fluid di dalamnya, seperti yang ditunjukkan dalam contoh berikut:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people...</p>
<p><a href="#" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>
</div>
