Bootstrap Jumbotron dan Header Halaman
Membuat Jumbotron
Jumbotron menunjukkan kotak besar untuk meminta perhatian ekstra pada beberapa konten atau informasi khusus.
Jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Itu juga memperbesar ukuran font teks di dalamnya.
Tip: Di dalam jumbotron Anda dapat meletakkan hampir semua HTML yang valid, termasuk elemen/kelas Bootstrap lainnya.
Gunakan <div>elemen dengan kelas .jumbotronuntuk membuat jumbotron:
Tutorial bootstrap
Bootstrap adalah kerangka kerja HTML, CSS, dan JS paling populer untuk mengembangkan proyek yang responsif dan mengutamakan seluler di web.
Jumbotron Di Dalam Wadah
Tempatkan jumbotron di dalam <div class="container">jika Anda ingin jumbotron TIDAK memanjang 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>
Wadah Luar Jumbotron
Tempatkan jumbotron di luar <div class="container">jika Anda ingin jumbotron meluas 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
Header halaman seperti pembagi bagian.
Kelas .page-headermenambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang ekstra di sekitar elemen):
Contoh Header Halaman
Gunakan <div>elemen dengan kelas .page-headeruntuk membuat header halaman:
Contoh
<div class="page-header">
<h1>Example Page Header</h1>
</div>