Home / Bootstrap / Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman utama website. Content(isi) pada jumbotron khusus di design berbeda; berbeda dari segi bentuk, ukuran font, warna background karena memang fungsinya untuk menonjolkan sebuah informasi sehingga menarik perhatian pengunjung.(baca: Cara mmbuat Pesan Alert dengan Bootstrap)

Bootstrap juga sudah menyediakan class yang siap pakai untuk membuat jumbotron. Class jumbotron dapat diletakkan di dalam maupun di luar class container, row dan col sehinga penggunaanya fleksibel dan dapat disesuaikan dengan kebutuhan.

Berikut ini contoh pertama cara membuat jumbotron dengan Bootstrap

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Jumbotrondengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">    
                <div class="jumbotron">
                  <h1>Hello, Selamat Datang di ITGeek.id</h1>
                  <p>Dalam Website  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta </p>
                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Selengkapnya</a> 
                  <a class="btn btn-danger btn-lg" href="#" role="button">Masuk</a></p>
                </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada contoh diatas untuk membuat jumbotron dimulai dari baris 11 sampai 16. Baris 11 kita hanya membuatkan class jumbotron dan didalamnya terdapat informasi yang bisa di sertakan heading, paragraf maupun elemen form seperti button.

Penggunaan class-class bootstrap pada button dapat di lihat di toturial Membuat tombol/button dengan bootstrap dan rancangan desain form pada tutorial Merancang form dengan bootstrap.

Hasil contoh pertama cara membuat jumbotron dengan bootstrap adalah sebagai berikut:

Hasil contoh 1 cara membuat jumbotron dengan bootstrap

Seperti yang saya sampikan sebelumnya, penempatan class jumbotron fleksibel. Dapat kita letakkan di dalam class container maupun diluar. Pada contoh diatas, class jumbotron berada dalam container, row dan col. Container menggunakan lebar kolom col sebanyak 12 grid.Silakan baca tutorial sebelumnya mengenai pengaturan layout halaman website dengan grid system bootstrap.

Contoh penggunaan class untuk mengatur jumbotron agar posisinya di luar container adalah sebagai berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Jumbotrondengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-md-12">    
                  <h1>Hello, Selamat Datang di ITGeek.id</h1>
                  <p>Dalam Website  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta </p>
                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Selengkapnya</a> 
                  <a class="btn btn-danger btn-lg" href="#" role="button">Masuk</a></p>
                </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Contoh diatas, class container berada dalam class jumbotron (lihat baris 8), sehingga lebar jumbotron akan memenuhi lebar halaman, bedakan dengan hasil dari contoh sebelumnya yang masih menyisakan space pada kiri dan kanan halaman.

Berikut hasil Jumbotron dengan Bootstrap yang classnya berada diluar container:

Hasil contoh 2 cara membuat jumbotron dengan bootstrap

Untuk lebih menarik, kita juga dapat menyertakan gambar dalam sebuah jumbotron. Silakan baca tutorial sebelumnya tentang cara mengatur tampilan gambar dengan bootstrap.

Demikian tutorial Cara membuat Jumbotron Dengan Bootstrap. Selamat mencoba dan semoga bermanfaat!

Tutorial selanjutnya adalah Cara membuat Carousel dengan Bootstrap. Penggunaan carousel dapat jadi alternatif selain Jumbotron. Bentuk carousel seperti slideshow dan biasanya ditempatkan di halaman utama website.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial sebelumnya kita sudah membahas tentang Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap. Kali …

Leave a Reply

Your email address will not be published. Required fields are marked *