Menggunakan Jumbotron Bootstrap 4 pada template Blogger

Pada posting ini kita melanjutkan pembahasan menggunakan Bootstrap pada template Blogger, setelah sebelumnya telah dibahas bagaimana menggunakan Search Bar dari Bootstrap. Disini kita akan melanjutkan bagaimana menggunakan Jumbotron Bootstrap 4 pada template Blogger ini, dan berikut ini screenshot contoh menggunakan jumbotron pada posting sebuah halaman website di blog ini.

Berikut ini adalah contoh penggunaan elemen jumbotron dari Bootstrap yang digunakan pada template Blogger ini.

<div class="jumbotron jumbotron-fluid" style="background-image: url('https://i.postimg.cc/mrdmwwzz/bgimg-nasgor.jpg');">
	<div class="jumbotron-overlay">
		<div class="container">
			<img src="https://i.postimg.cc/2y1fzyvy/bgs-avatar.png" width="20%"/>
			<b:if cond='data:title != &quot;&quot;'>
				<h1 class="display-4"><data:title/></h1>
			</b:if>
			<b:if cond='data:description != &quot;&quot;'>
				<p class='description'><span><data:description/></span></p>
			</b:if>
		</div>
	</div>
</div>

Jumbotron ini diletakkan pada bagian Header pada template, dan juga digunakan sebagai header pada posting seperti tampilan gambar pertama posting ini.

Untuk memahami lebih lanjut kita bisa lihat dokumentasi Jumbotron pada Bootstrap.