Lebak Cyber Tips dan Trik Komputer
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.
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.
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 :
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.
