Apa itu Jumbotron? Bagaimana Cara Menggunakannya?

5/5 (33)
Bootstrap
Apa itu Jumbotron?

Apa itu Jumbotron? – Pada artikel kali ini belajar menggunakan Jumbotron pada Bootstrap. Apa itu Jumbotron? Jumbotron adalah satu element yang dibuat untuk tujuan membuat semacam pengumuman,konten khusus atau informasi tentang halaman website.

Sekarang, hampir tiap website menggunakan Jumbotron pada halaman depan mereka. Biasanya Jumbotron ini berwarna grey atau lebih gelap dari warna template website tersebut.

Baca juga: Contoh dan Cara Penggunaan Gambar pada Bootstrap.

TIP: Di dalam Jumbotron, kita bisa menambahkan script valid HTML, termasuk element dan/atau class lainnya.

Bagaimana Menggunakan Jumbotron pada Bootstrap?

Kita bisa memanggil class ini menggunakan element <code<<div>, lebih jelasnya mari kita praktekkan.
Buat satu file HTML, lalu pastekan kode berikut.

<!-- Jangan lupa memanggil Bootstrap -->
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial | codelatte.org</h1>
<p>Belajar menggunakan <code>Jumbotron</code>pada Bootstrap.</p>
</div>
</div>

Maka hasilnya akan menjadi seperti ini,

Contoh Penggunaan Jumbotron
Contoh Penggunaan Jumbotron

Kita juga bisa membuat tampilan Jumbotron agar memenuhi layar. Caranya? Lihat contoh dibawah,

See the Pen Contoh Penggunaan Jumbotron | codelatte.org by Abay (@abaykan) on CodePen.

Sekian pembahasan tentang Jumbotron, semoga bermanfaat dan apabila masih bingung atau ada pertanyaan, silahkan tinggalkan komentar dibawah.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

5 tanggapan untuk “Apa itu Jumbotron? Bagaimana Cara Menggunakannya?

  • 31 Juli 2018 pada 9:46 PM
    Permalink

    Thanks for a marvelous posting! I quite enjoyed reading it, you’re a great author.I will always bookmark
    your blog and may come back in the foreseeable future.

    Balas
  • 31 Juli 2018 pada 9:46 PM
    Permalink

    Thanks for a marvelous posting! I quite enjoyed reading it, you’re a great author.I
    will always bookmark your blog and may come back in the foreseeable future.
    I want to encourage continue your great work, have
    a nice afternoon!

    Balas
  • 7 Oktober 2018 pada 12:34 AM
    Permalink

    Thank you for some other informative web site.
    The place else could I get that kind of information written in such a perfect means?

    Balas
  • 7 Oktober 2018 pada 5:28 AM
    Permalink

    I am glad to be a visitor of this sodding blog, regards for
    this rare info!

    Balas
  • 18 Oktober 2018 pada 5:44 AM
    Permalink

    I read this piece of writing fully about the difference of most up-to-date
    and earlier technologies, it’s amazing article.

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *