Bootstrap 3 Jumbotron - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Jumbotron

TikSonic - Komponen Bootstrap jumbotron menunjukkan sebuah kotak besar yang digunakan untuk menampilkan konten utama atau informasi pada halaman web, misalnya seperti seperti judul, deskripsi dan lain sebagainya sesuai keperluan.

Di dalam jumbotron hampir semua HTML yang valid termasuk komponen Bootstrap lainnya dapat dituliskan didalamnya.

Cara Penerapan Jumbotron

Untuk menerapkan bagaimana jumbotron dibuat, gunakan element Gunakan elemen dan berikan class .jumbotron sebagai class dasarnya, selengkapnya silahkan lihat contoh berikut :

<div class="jumbotron">
  <h1>Tutorial Bootstrap Indonesia</h1>
  <p>Panduan belajar bootstrap berbahasa indonesia</p>
  <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>

Custom Jumbotron

Secara default bootstrap jumbotron ditampilkan sebagai kotak dengan warna latar abu-abu. Jika menginginkan tampilan yang berbeda pada Jumbotron dapat memberikan class tambahan pada class dasarnya, yang kemudian diatur melalui CSS.

Contoh :

<!-- CSS custom jumbotron-->
<style>
.jumbotron.night {
  background-color: #333;
  color: #eaeaea;
}
</style>

<!-- html -->
<div class="jumbotron night">
  <h1>Tutorial Bootstrap Indonesia</h1>
  <p>Panduan belajar bootstrap berbahasa indonesia</p>
  <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>

Mengatur Lebar Jumbotron 1 halaman penuh

Agar jumbotron memiliki lebar 1 halaman penuh area pandang dan tanpa adanya sudut membulat pada bagian ujungnya, Bungkus semua element yang ada didalam jumbotron dengan element <div> dengan class .container letakkan pada element dengan posisi level 2.

Contoh :

<!-- contoh 1 -->
<div class="jumbotron">
  <div class="container">  <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night">
  <div class="container">    <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

Mengatur Posisi Konten Jumbotron

Untuk mengatur posisi konten yang ada didalam Jumbotron, seperti berada ditengah atau kiri cukup menggunakan class .text-left (posisi kiri default), .text-center (posisi tengah) dan .text-right (posisi kanan) yang ditulis pada element apapun sesuai keperluan atau bisa juga dengan menempatkannya secara global pada class dasar .jumbotron

Contoh :

<!-- contoh 1 -->
<div class="jumbotron text-center">
  <div class="container">
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night text-right">
  <div class="container">
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>