我們可以通過 Bootstrap5 的 .card 與 .card-body 類來建立一個簡單的卡片，卡片可以包含頭部、内容、底部以及各種顔色設定，執行個體如下:
<div class="card">
<div class="card-body">簡單的卡片</div>
</div>
.card-header類用于建立卡片的頭部樣式， .card-footer 類用于建立卡片的底部樣式：
<div class="card-header">頭部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
Bootstrap 4 提供了多種卡片的背景顔色類： .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<div class="container">
<h2>多種顔色卡片</h2>
<div class="card-body">基礎卡片</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">主要卡片</div>
<div class="card bg-success text-white">
<div class="card-body">成功卡片</div>
<div class="card bg-info text-white">
<div class="card-body">資訊卡片</div>
<div class="card bg-warning text-white">
<div class="card-body">警告卡片</div>
<div class="card bg-danger text-white">
<div class="card-body">危險卡片</div>
<div class="card bg-secondary text-white">
<div class="card-body">次要卡片</div>
<div class="card bg-dark text-white">
<div class="card-body">黑色卡片</div>
<div class="card bg-light text-dark">
<div class="card-body">淺色卡片</div>
我們可以在頭部元素上使用 .card-title 類來設定卡片的标題 。
.card-body 類用于設定卡片正文的内容。.card-text 類用于設定卡 .card-body 類中的 <p> 标簽，如果說最後一行可以移除底部邊距。 .card-link 類用于給連結設定顔色。
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
我們可以給
<img> 添加 .card-img-top（圖檔在文字上方） 或 .card-img-bottom（圖檔在文字下方 來設定圖檔卡片：
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
如果圖檔要設定為背景，可以使用 .card-img-overlay 類:
<div class="card" style="width:500px">
<div class="card-img-overlay">