Bootstrap 4 – CSS Jumbotron

Bootstrap 4 - Digitechcirebon.com

Pada Pembahasan kali ini kita akan membahas Apa itu Jumbotran pada Bootstrap. Disini saya menggunakan bootstrap 4.0.0 versi terbaru dari yang sebelumnya yaitu Bootstrap 3. Okee langsung saja simak artikel ini sampai akhirr…

Apa itu Jumbotron ?

Jumbotron Ialah semacam blok untuk tujuan membuat semacam kontent khusus, Pengumuman atau pun informasi tentang sebuah halaman website. Mungkin kalian sering liat yang diajalan-jalan ada layar Tv yang besar itu, itu namanya Jumbotron juga. Namun yang akan kita bahas bukan Jumbotron yang ada dijalan-jalan tapi sebuah class jumbotron pada css.

Sekarang ini hampir seluruh design template website rata-rata menggunakan jumbotron untuk memberikan informasi halaman depan websitenya. Jumbotron Bootstrap juga bisa anda modifikasi sendiri sesuai keinginan tetapi kali ini saya akan membuat jumbotron bootstrap dengan gaya standar dari Bootstrapnya sendiri.

Membuat Jumbotron dengan Bootstrapnya

untuk membat jumbotron dengan bootstrap biasanya kita menggunakna elemen <div> dan gunakan elemen dari baris class .jumbotron sebagai kelas dasarnya di css. berikut contohnya :

<div class="jumbotron">
    <h1>Digitech Cirebon</h1>
    <p>Pionering Smart Generation</p>
    <p><a href="#" class="btn btn-primary btn-lg"> Selengkapnya</a></p>
</div>

hasil

Mengatur Lebar Jumbotron

Agar Jumbotron memiliki lebar yang sesuai bisa gunakan container. Container kalau diartikan b.indo ini artinya yaitu wadah. Fungsinya yaitu untuk mengatasi masalah menengahkan elemen yang diinginkan atau bisa singkatnya untuk position center. perhatikan contoh berikut :

<!-- jumbotron -->
    <div class="jumbotron">
      <div class="container">
        <h1>Digitech Cirebon</h1>
        <p>Pionering Smart Generation</p>
        <p><a href="#" class="btn btn-primary btn-lg"> Selengkapnya</a></p>
      </div>
    </div>

hasil

Mengatur Posisi Jumbotron

Jika ingin mengatur posisi dari konten yang ada di dala jumbotron seperti posisi di tengah, kiri atau pun kanan bisa langsung saja dengan menambahkan .text-center (Posisi tengah) .text-right (Posisi Kanan) dan .text-left (Posisi Kiri Default ).

Posisi Jumbotron Center

<!-- jumbotron -->
    <div class="jumbotron text-center">
      <div class="container">
        <h1>Digitech Cirebon</h1>
        <p>Pionering Smart Generation</p>
        <p><a href="#" class="btn btn-primary btn-lg"> Selengkapnya</a></p>
      </div>
    </div>

hasil

Posisi Jumbotron Kanan

<!-- jumbotron -->
    <div class="jumbotron text-right">
      <div class="container">
        <h1>Digitech Cirebon</h1>
        <p>Pionering Smart Generation</p>
        <p><a href="#" class="btn btn-primary btn-lg"> Selengkapnya</a></p>
      </div>
    </div>

hasil

Okee itu tadi penjelasan singkat tentang Bootstrap cara pembuatan Jumbotron. Ikuti terus perkembangan digitechcirebon.com karena akan banyak infomasi seputar perkembangan IT dan Pembelajaran seputar teknologi komputer lainnya yang bermanfaat. Terimakasih

Baca Artikel lainnya Dengan Google Translate Bisa Tembus internet positif Kominfo

Pentingnya Google Analiytics bagi para Pelaku Bisnis Online

About The Author

Related posts

Leave a Reply

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