hai teman – teman kembali lagi di dosenit.com, setelah kemarin kita membahas mengenai typography dalam bootstrap kali ini akan membahas soal Jumbotron.
Untuk teman teman yang belum mengetahui apa itu Jumbotron, Jumbotron adalah sebuah komponen dalam pembuatan website yang digunakan untuk mengindikasikan bahwa konten tersebut bersifat spesial atu informatif bagi pembaca.
Jumbotron dalam bootstrap dibuat dengan menambahkan class .jumbotron yang ditempatkan dalam tag <div>. Kenap ditempatkan daam tag div ? karena jumbotron ini bersifat area yang lumayan luas sehingga tag div yang sangat cocok untuk hal ini.
Apakah bisa dengan menggunakan tag lain seperti <p> atau bahkan di <body> jawabannya bisa tetapi hal ini tidak umum dilakukan.
Karena jika ditempatkan pada tag <body> maka jumbotron akan memenuhi tampilan dari website kita dan tidak ada tempat untuk konten lainnya (kecuali memang sengaja teman-teman membuat menjadi hal seperti ini ).
Jumbotron Default
Berikut contoh penggunaan Jumbotron standar atau default pada penggunaan di halaman website:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial Jumbotron</h1> <p>Ini adadalah teks yang masuk dalam tag div dengan class jumbotron. Di dalam ini kita dapat memasukkan berbagai macam tag html </p> </div> <p>Ini diluar tag div dan class jumbotron</p> <p>Ini diluar tag div dan class jumobtron</p> </div> </body> </html>
Jumbotron Fluid
Sedangkan untuk membuat jumbotron memenuhi tampilan layar tanpa sudut yang membulat atau tumpul yaitu dengan memasukkan class .jumbotron-fluid dengan class .container dan .container-fluid ada didalamnya. Silahkan perhatikan contoh dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Bootstrap Tutorial Jumbotron Fluid</h1>
<p>Tulisan ini ada didalam class <b>.jumbotron jumbotron-fluid</b> sehingga akan terlihat memenuhi layar dan terlihat berbeda dengan warna latarbelakang abu-abu </p>
</div>
</div>
<div class="container">
<p>Ini diluar jumbotron.</p>
<p>ini diluar jumbotron</p>
</div>
</body>
</html>
Selain teks teman-teman juga dapat membuat kreasi sendiri seperti memberi background serta button pada jumbotron yang telah teman – teman buat. Bagaimana caranya ? yaitu dengan menggunakan fasilitas CSS yang disebut background-image. Lebih jelasnya perhatikan contoh dibawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.jumbotron-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="jumbotron text-white" style="background-image: url(https://images.unsplash.com/photo-1552152974-19b9caf99137?fit=crop&w=1350&q=80);">
<h2 class="mb-4">
Jumbotron dengan gambar latar belakang
</h2>
<p class="mb-4">
Selamat teman - teman telah berhasil membuat jumbotron berlatarbelakang gambar
</p>
<a href="https://dosenit.com/bootstrap/bootstrap-4" class="btn btn-primary">tutorial bootstrap lain</a>
</div>
</div>
</body>
</html>
Itulah beberapa dasar dari pembuatan jumbotron pada bootstrap. Selain menambahkan gambar dan button teman teman bisa kreasikan sendiri sesuai dengan kebutuhan dari website teman – teman sendiri.
