Jumbotron merupakan area besar pada Bootstrap yang berfungsi untuk mendapatkan perhatian lebih bagi para pengunjung jika melihat Jumbotron pada suatu website, umumnya digunakan untuk menampilkan sebuah infromasi penting.
Seacara default, Jumbotron berwarna dasar abu-abu dengan rounded sisi. Banyak yang menerapkan Jumbotron pada bagian setelah, atau bagian header diganti oleh Jumbotron, tapi bisa juga diletakkan di tempat lain.
Untuk awal percobaan, tidak perlu memikirkan hal lain seperti styling warna, gaya text, ukuran, dsb. cukup ikuti saja tutorial ini dan pastikan Jumbotron berhasil tampil.
Membuat Jumbotron Bootstrap
Terdapat 2 model Jumbotron yang umum ditemukan di internet, yaitu Jumbotron di dalam container dan Jumbotron di luar container. Ini tergantung pada desain yang disenangi.
- Jumbotron di dalam container
Jumbotron di dalam container adalah Jumbotron yang berada di dalam container, artinya sejajar dengan container. Ini biasanya digunakan oleh situs web / blog yang lebih menyenangi boxed layout.
Untuk membuat Jumbotron di dalam container seperti di atas cukup gunakan struktur code seperti yang terlihat di bawah ini, maka hasilnyapun Jumbotron tersebut akan berada sejajar dengan container seperti yang terlihat pada contoh gambar di bawah.
<div class="container">
<div class="jumbotron">
<h1>Jumbotron di dalam container - Posciety</h1>
<p>Ini adalah contoh Jumbotron di dalam container, biasanya digunakan oleh tata letak blog kotak (boxed layout).</p>
</div>
<p>Ini adalah tulisan di luar Jumbotron, misalnya konten website. TLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
- Jumbotron di luar container
Berbeda dengan Jumbotron di dalam container, Jumbotron di luar container berada di luar sebuah container yang artinya ia bisa saja memiliki ukuran lebih lebar tanpa terbatas oleh container manapun. Ini umum digunakan oleh situs yang memiliki tata letak site-wide atau boxed (jika boxed, ini akan memiliki lebar tidak sama dengan container).
Gambar ini adalah contoh dari Jumbotron di luar container, perhatikan lebar dan posisi Jumbotron terlihat tidak dibatasi oleh sebuah container. Ini terlihat lebih menarik bagi beberapa layout termasuk boxed layout. Untuk membuat Jumbotron di luar container cukup salin kodingan berikut:
<div class="jumbotron"> <h1>Jumbotron di dalam container - Posciety</h1> <p>Ini adalah contoh Jumbotron di dalam container, biasanya digunakan oleh tata letak blog kotak (boxed layout).</p> </div> <div class="container"> <p>Ini adalah tulisan di luar Jumbotron, misalnya konten website. TLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <p>Ini adalah tulisan di luar Jumbotron, misalnya konten website. TLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div>
Ya, perbedaan Jumbotron ini hanya dibedakan oleh posisi atau tata letaknya saja. Untuk style lainnya seperti memberikan warna background, bentukan (shape), dan hal lainnya dapat disesuaikan sesuai desain dari blog itu sendiri.
Ingat saja class jumbotron jika di kemudian hari ingin membuat Jumbtron lagi, untuk posisi bisa disesuaikan tergantung dimana kamu meletakkan class tersebut.
Jika pernah mengikuti video-video tutorial di channel YouTube Posciety tentang cara membuat website dengan Bootstrap, pasti sudah pernah lihat Jumbotron pada beberapa video tersebut.