Cara menggunakan jumbotron bootstrap 5

Question

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Table of Contents Show

Jumbotron Default
Jumbotron Fluid
Jumbotron Image dan button
Apa itu jumbotron pada bootstrap?
Apa itu Bootstrap 5?
Apa yang baru di bootstrap 5?
Apa itu jumbotron di HTML?

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.


  
Hello, world!
  This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
  
  It uses utility classes for typography and spacing to space content out within the larger container.
  
    Learn more

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

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 .jumbotronyang 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 ).

Section Artikel

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>

Jumbotron Image dan button

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.

Apa itu jumbotron pada bootstrap?

Jumbotron adalah sebuah komponen yang ringan dan fleksibel yang disediakan oleh bootstrap. untuk menampilkan konten yang diunggulkan pada sebuah halaman website. Biasanya pesan yang ingin disampaikan ke pengunjung website, dibuat menggunakan jumbotron, agar lebih terlihat dan mendapat perhatian dari pengunjung website.

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.

Apa yang baru di bootstrap 5?

Ada beberapa hal baru di Bootstrap 5 dan update yang bisa Anda temukan, yaitu:.

Logo dan Tampilan Dokumentasi Baru. ... .

2. jQuery Tidak Lagi Digunakan. ... .

Penghentian Support untuk Browser Lama. ... .

4. Dukungan untuk Tampilan Right-To-Left (RTL) ... .

Bootstrap Icons. ... .

6. Update pada Elemen Form. ... .

7. Update pada Grid System. ... .

Update pada Navbar..

Apa itu jumbotron di HTML?

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.

kode bootstrap