Source

Jumbotron

Komponen ringan dan fleksibel untuk menampilkan konten gaya unit pahlawan.

Komponen ringan dan fleksibel yang secara opsional dapat memperluas seluruh area pandang untuk menampilkan pesan pemasaran utama di situs Anda.

Halo Dunia!

Ini adalah unit pahlawan sederhana, komponen gaya jumbotron sederhana untuk meminta perhatian ekstra pada konten atau informasi unggulan.


Ini menggunakan kelas utilitas untuk tipografi dan spasi untuk menempatkan konten di dalam wadah yang lebih besar.

Belajarlah lagi

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

Untuk membuat jumbotron lebar penuh, dan tanpa sudut membulat, tambahkan .jumbotron-fluidkelas pengubah dan tambahkan a .containeratau .container-fluiddi dalamnya.

Cairan jumbotron

Ini adalah jumbotron yang dimodifikasi yang menempati seluruh ruang horizontal induknya.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>