Belajar Bootstrap (5. Jumbotron)

Belajar Bootstrap (5. Jumbotron)

Kali ini kita akan membahas tentang class jumbotron. Jumbotron pada bootstrap digunakan untuk membuat kotak besar. Istilahnya kita membuat pengumuman atau yang lainya sehingga mendapat perhatian lebih agar dibaca. Contohnya kita menampilkan informasi, diskon, atau penawaran baru pada halaman utama pada situs kita. Langsung saja , tulis contoh kode dibawah ini kemudian jalankan.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>Belajar jumbotron</title>
</head>
<body>
	<div class="container">
		<div class="jumbotron">
			<h2>Belajar bootstrap</h2>
			<p>Bootstrap adalah salah satu framework terpopuler untuk membuat web responsive</p>
		</div>
		<p>ini contoh kalimat</p>
		<p>ini contoh kalimat</p>
	</div>
</body>
</html>

hasil

Page header
page header digunakan untuk membuat bagian atas pada halaman. Contoh:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width:device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>Belajar jumbotron</title>
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h2>Bootstrap</h2>
		</div>
		<p>ini contoh kalimat</p>
		<p>ini contoh kalimat</p>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

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