Bootstrap - Jumbotron

Bab ini akan membahas satu lagi fitur yang didukung Bootstrap, Jumbotron. Seperti namanya, komponen ini secara opsional dapat meningkatkan ukuran tajuk dan menambahkan banyak margin untuk konten halaman arahan. Untuk menggunakan Jumbotron -

• Buat wadah <div> dengan kelas .jumbotron.

• Selain <h1> yang lebih besar, font-weight dikurangi menjadi 200px.

Contoh berikut menunjukkan ini -

<div class = "container">

   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>

Untuk mendapatkan jumbotron dengan lebar penuh, dan tanpa sudut membulat, gunakan .jumbotron kelas di luar semua .container kelas dan sebagai gantinya menambahkan .container di dalam, seperti yang ditunjukkan pada contoh berikut -

<div class = "jumbotron">
   
   <div class = "container">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
   
</div>