Monday , November 30 2020
Home » Bootstrap » Membuat Jumbotron Menggunakan Bootstrap

Membuat Jumbotron Menggunakan Bootstrap

Membuat Jumbotron Menggunakan Bootstrap

lebakcyber.net – Membuat jumbotron menggunakan Bootstrap. Oke jadi pada kesempatan kali ini kita akan mempelajari mengenai bagaimana cara untuk membuat sebuah jumbotron dengan memakai Bootstrap.

Jumbotron sendiri adalah sebuah bentuk yang dibuat secara khusus yang bertujuan contohnya untuk membuat pengumuman, informasi mengenai halaman dari suatu website ataupun digunakan untuk konten khusus.

Jumbotron sendiri biasanya dibuat pada halaman depan dari sebuah website dan secara default pada Bootstrap sebuah jumbotron memiliki warna abu-abu dan sisi yang bulat pada setiap sudutnya. Didalam jumbotron sendiri biasanya berisi text yang bisa secara bebas di kustomisasi sesuai dengan yang kalian inginkan.

Advertisements

Sekarang ini hampir semua halaman pada sebuah website menggunakan jumbotron yang digunakan untuk memberikan informasi pada halaman utamanya. Selain itu jumbotron juga bisa di modifikasi dengan cara menambahkan css agar desainnya sesuai dengan keinginan kita.

Dan sekarang kita akan mencoba membuat agar jumbotron yang kita buat pada sebuah halaman website terlihat menjadi lebih menarik dibandingkan dengan jumbotron bawaan dari Bootstrap.

Advertisements

Silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Jumbotron Menggunakan Bootstrap</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>	
    <div class="container">
        <div class="jumbotron">
            <h2>Selamat Datang Di Website Lebakcyber.net</h2> 
            <p>
                Di website ini kalian dapat mempelajari berbagai bahasa pemrograman secara gratis 
                Mulai dari belajar HTML, CSS, Bootstrap, Codeigniter, Visual Basic dan lain sebagainya <br/>
                Jadi selamat belajar di situs lebakcyber.net			
            </p> 
            <p>
                <button class="btn btn-lg btn-primary">Button Didalam Jumbotron</button>
                <button class="btn btn-lg btn-warning">Button Didalam Jumbotron</button>
            </p>
        </div>
        
    </div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

membuat jumbotron menggunakan bootstrap

Oke jadi seperti itulah bagaimana cara membuat sebuah jumbotron pada halaman HTML dengan memakai Bootstrap, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar Bootstrap selanjutnya ya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

membuat navigation bar menggunakan bootstrap

Navigation Bar Menggunakan Bootstrap

Navigation Bar Menggunakan Bootstrap lebakcyber.net – Membuat Navigation bar menggunakan bootstrap. Pada kesempatan kali ini …

Leave a Reply

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