Tutorial Belajar Bootstrap Bagian 26 : Cara Membuat Jumbotron di Bootstrap

0
139

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 25 : Cara Membuat Spinner di Bootstrap, selanjutnya kita akab belajar cara membuat jumbotron di Bootstrap.

Komponen jumbotron Bootstrap menyediakan cara terbaik untuk menampilkan konten atau informasi utama pada halaman web.

Cukup bungkus konten unggulan Anda seperti judul, deskripsi, dll dalam elemen <div> dan terapkan class .jumbotron di dalamnya.

    <div class="jumbotron">
        <h1>Belajar Membuat Website</h1>
        <p class="lead"> Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwp.com" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari inti dari teknologi pengembangan web, lengkap dengan contoh praktik dalam kehidupan nyata, sehingga Anda dapat membuat web sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
        <p><a href="https://mbahwp.com" target="_blank" class="btn btn-primary btn-lg" rel="noopener">Mulai belajar sekarang</a></p>
    </div>

Membuat Jumbotron Lebar Halaman Penuh

Untuk membuat jumbotron tanpa sudut membulat dan menutupi seluruh lebar viewport, letakkan di luar semua container, tambahkan class pengubah .jumbotron-fluid di atasnya, dan tambahkan .container atau .container-fluid di dalamnya, seperti yang ditunjukkan pada contoh berikut:

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1> Belajar Membuat Website</h1>
            <p class="lead">Di dunia saat ini, internet adalah cara paling populer untuk berhubungan dengan orang-orang. Di <a href="https://mbahwp.com" target="_blank" rel="noopener"> mbahwp.com </a> Anda akan mempelajari inti dari teknologi pengembangan web, lengkap dengan contoh praktik dalam kehidupan nyata, sehingga Anda dapat membuat web sendiri untuk terhubung dengan orang-orang di seluruh dunia.</p>
            <p><a href="https://mbahwp.com" target="_blank" class="btn btn-primary btn-lg" rel="noopener">Mulai belajar sekarang </a></p>
        </div>
    </div>

Semoga tutorial ini membantu Anda belajar cara mebuat jumbotron di Bootstrap.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.