Membuat Jumbotron a
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 lainnya Bootstrap elemen / kelas.
Gunakan <div> elemen dengan kelas .jumbotron untuk 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>
Cobalah sendiri " 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>
Cobalah sendiri " Membuat Header Halaman
Sebuah header halaman seperti bagian divider.
The .page-header kelas menambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang tambahan di sekitar elemen):
Misalnya Header Halaman
Gunakan <div> elemen dengan kelas .page-header untuk membuat header halaman: