Fungsi Baru Jumbotron pada Bootstrap 4

Bootstrap 4 menawarkan fitur baru yang pada versi sebelumnya tidak ada. Dan ada juga class versi lama diperbarui dengan cara yang baru. Dengan adanya pembaruan, maka sudah dipastikan akan menyesuaikan dengan kebutuhan sekarang ini, tentu akan berdampak pada segi penulisan dan ke efisien dalam membuat tampilan. Pada pembahasan artikel kali ini kita akan mengupas salah satu fitur baru yang diversi sebelumnya tidak ada. Ya, kita akan belajar mengenai fungsi baru jumbotron pada bootstrap 4.

Bagi kalian yang belum tahu apa itu jumbotron, jumbotron adalah suatu class yang ada pada bootstrap berfungsi untuk membuat suatu elemen dengan ukuran yang cukup besar lalu diwarnai dengan background abu-abu. Dengan adanya jumbotron ini, biasanya digunakan sebagai media menampilkan menu yang sangat dicari, atau sebagai hal yang sangat disorot pertama kali oleh pengunjung website kita. Lalu pada versi 4 ini ternyata jumbotron memiliki fungsi baru yaitu jumbotron-fluid. Fungsinya untuk apa ? mari kita simak contoh code berikut ini.

jumbotron.html

<html>
<head>
	<meta charset="UTF-8">
	<title> Jumbotron Bootstrap 4 </title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
	<div class="jumbotron jumbotron-fluid">
	  	<div class="container">
	    	<h1>Bootstrap Tutorial</h1>      
	    	<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
	  	</div>
	</div>

	<div class="container">
	  	<p>Paragraf satu</p>      
	  	<p>Paragrf lainya</p>      
	</div>
</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut dengan browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Bentuk dari jumbotron dengan ditambahkan perintah jumbotron-fluid menghasilkan suatu baris horizontal yang ukuranya cukup besar. Dengan begitu akan terlihat lebih menarik dengan gaya flat design yang sekarang ini sangat umum kita temui pada website. Tentu ini akan membuat tampilan website kita lebih fresh dengan mengikuti gaya trend saat ini. Mudah bukan ?

Sekian pembahasan mengenai fungsi baru jumbotron pada bootstrap 4. Semoga artikel kali ini bermanfaat dan menginspirasi kalian untuk terus belajar lagi. Sampai jumpa pada pembahasan lainya.