Belajar Bootstrap Part 5 Menampilkan Jumbotron

Belajar Bootstrap Part 5 Menampilkan Jumbotron

Assalamualaikum ^^

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

PENGERTIAN

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 .jumbotron untuk membuat jumbotron:
bootstrap Tutorial

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

LATAR BELAKANG

Ingin mempelajari bagaimana cara menambahkan  class jumbotron di dalam HTML dengan bootstrap.

MAKSUD & TUJUAN

Memudahkan dalam membuat sebuah section dengan class jumbotron.

ALAT & BAHAN

• PC/LAPTOP
• Text Editor
• Browser

LANGKAH KERJA

Untuk membuat jumbotron ada beberapa cara penggunaannya, berikut contohnya

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>

Sekian dari saya, semoga bermanfaat.

 Syukron

Wassalamualaikum Wr. Wb.

Referensi

www.w3schools.com