tRikSonic
Tema
  • Original
  • Translate

Bootstrap 3 Jumbotron - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 06.00

Tutorial Bootstrap 3 Jumbotron

TikSonic - Komponen Bootstrap jumbotron menunjukkan sebuah kotak besar yang digunakan untuk menampilkan konten utama atau informasi pada halaman web, misalnya seperti seperti judul, deskripsi dan lain sebagainya sesuai keperluan.
Di dalam jumbotron hampir semua HTML yang valid termasuk komponen Bootstrap lainnya dapat dituliskan didalamnya.

Cara Penerapan Jumbotron

Untuk menerapkan bagaimana jumbotron dibuat, gunakan element Gunakan elemen dan berikan class .jumbotron sebagai class dasarnya, selengkapnya silahkan lihat contoh berikut :
<div class="jumbotron">
  <h1>Tutorial Bootstrap Indonesia</h1>
  <p>Panduan belajar bootstrap berbahasa indonesia</p>
  <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>

<div class="container-fluid">
  <div class="jumbotron">
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<div class="container">
  <p>
    Rubah lebar area preview untuk melihat area responsive.
  </p>
</div>

</body>
</html>

Custom Jumbotron

Secara default bootstrap jumbotron ditampilkan sebagai kotak dengan warna latar abu-abu. Jika menginginkan tampilan yang berbeda pada Jumbotron dapat memberikan class tambahan pada class dasarnya, yang kemudian diatur melalui CSS.

Contoh :

<!-- CSS custom jumbotron-->
<style>
.jumbotron.night {
  background-color: #333;
  color: #eaeaea;
}
</style>

<!-- html -->
<div class="jumbotron night">
  <h1>Tutorial Bootstrap Indonesia</h1>
  <p>Panduan belajar bootstrap berbahasa indonesia</p>
  <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
  background-color: #333;
  color: #eaeaea;
}
</style>
</head>
<body>

<div class="jumbotron night">
  <h1>Tutorial Bootstrap Indonesia</h1>
  <p>Panduan belajar bootstrap berbahasa indonesia</p>
  <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
</div>

<!--note-->
<div class="container">
  <p>
    Rubah lebar area preview untuk melihat area responsive.
  </p>
</div>

</body>
</html>

Mengatur Lebar Jumbotron 1 halaman penuh

Agar jumbotron memiliki lebar 1 halaman penuh area pandang dan tanpa adanya sudut membulat pada bagian ujungnya, Bungkus semua element yang ada didalam jumbotron dengan element <div> dengan class .container letakkan pada element dengan posisi level 2.

Contoh :

<!-- contoh 1 -->
<div class="jumbotron">
  <div class="container">  <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night">
  <div class="container">    <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
  background-color: #333;
  color: #eaeaea;
}
</style>
</head>
<body>

<!-- contoh 1 -->
<div class="jumbotron">
  <div class="container">  <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night">
  <div class="container">    <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!--note-->
<div class="container">
  <p>
    Rubah lebar area preview untuk melihat area responsive.
  </p>
</div>

</body>
</html>

Mengatur Posisi Konten Jumbotron

Untuk mengatur posisi konten yang ada didalam Jumbotron, seperti berada ditengah atau kiri cukup menggunakan class .text-left (posisi kiri default), .text-center (posisi tengah) dan .text-right (posisi kanan) yang ditulis pada element apapun sesuai keperluan atau bisa juga dengan menempatkannya secara global pada class dasar .jumbotron

Contoh :

<!-- contoh 1 -->
<div class="jumbotron text-center">
  <div class="container">
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night text-right">
  <div class="container">
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<title>Triksonic Demo Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- CSS Bootstrap 3 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- custom jumbotron-->
<style>
.jumbotron.night {
  background-color: #333;
  color: #eaeaea;
}
</style>
</head>
<body>

<!-- contoh 1 -->
<div class="jumbotron text-center">
  <div class="container">  <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!-- contoh 2 -->
<div class="jumbotron night text-right">
  <div class="container">    <!-- level 2-->
    <h1>Tutorial Bootstrap Indonesia</h1>
    <p>Panduan belajar bootstrap berbahasa indonesia</p>
    <p><a href="#" class="btn btn-primary btn-lg">Selengkapnya</a></p>
  </div>
</div>

<!--note-->
<div class="container">
  <p>
    Rubah lebar area preview untuk melihat area responsive.
  </p>
</div>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.