Bootstrap Part 6 : Bootstrap Jumbotron

Assalamu alaikum Wr Wb.

Dalam pertemuan kali ini, saya akan memaparkan mengenai Bootstrap Jumbotron.

Membuat Jumbotron

Sebuah jumbotron menunjukkan sebuah kotak besar untuk memanggil perhatian ekstra untuk beberapa konten khusus atau informasi.

Sebuah jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Hal ini juga memperbesar ukuran font teks di dalamnya.

Tip: Di dalam jumbotron Anda dapat menempatkan hampir semua HTML yang valid, termasuk elemen Bootstrap lainnya / kelas.

Gunakan <div>elemen dengan class .jumbotronuntuk membuat jumbotron:
bootstrap Tutorial

Bootstrap adalah HTML, CSS, dan kerangka JS paling populer untuk mengembangkan responsif, proyek seluler pertama di web.
Jumbotron Inside Container

Tempatkan jumbotron dalam <div class="container">jika Anda ingin jumbotron untuk tidak memperpanjang ke tepi layar:
Contoh

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Jumbotron luar Kontainer

Tempatkan jumbotron luar <div class="container">jika Anda ingin jumbotron untuk memperpanjang ke tepi layar:
Contoh

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Membuat Header Halaman
Sebuah header halaman seperti bagian divider.

The .page-headerkelas menambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang tambahan di sekitar elemen):
Misalnya Header Halaman

Gunakan <div>elemen dengan class .page-headeruntuk membuat header halaman:
Contoh

<div class="page-header">
  <h1>Example Page Header</h1>
</div>

REFERENSI
http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp