Menggunakan Card Bootstrap 4 pada template Blogger

Pada posting ini kita melanjutkan pemabahasan menggunakan Bootstrap pada template Blogger, setelah sebelumnya telah dibahas bagaimana menggunakan Jumbotron dari Bootstrap. Disini kita akan melanjutkan bagaimana menggunakan Card dari Bootstrap pada template Blogger ini.

Berikut ini adalah contoh penggunaan elemen card dari Bootstrap yang digunakan pada template Blogger ini untuk menampilkan Featured Post atau Popular Posts.

<div class="card h-100 mb-3 border-0">
	<!-- Widget Tittle -->
	<b:if cond='data:title != &quot;&quot;'>
		<span class="card-header bg-transparent border-0 p-0"><h5><data:title/></h5><hr/></span>
	</b:if>
	<div class="row no-gutters">
		<div class="col-md-4 order-md-last">
			<b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
			<a expr:href='data:postUrl' class='stretched-link text-reset'>
				<img class='image' style="width:100%" expr:src='data:postFirstImage'/>
				</a>
			</b:if>
		</div>
		<div class="col-md-8 order-md-first">  
			<div class="card-body">
				<b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
					<h5 class="card-title">
						<a expr:href='data:postUrl' class='stretched-link text-reset'><data:postTitle/></a>
					</h5>
				</b:if>
				<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
					<p class="card-text">
						<b:eval expr='snippet(data:postSummary, {length: 200})' />
					</p>
				</b:if>
			</div>
		</div>
	</div>
</div>

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