ㄧ.單一卡片

<div id="demo" class="component">
 <div class="card text-center" style="width: 18rem;">
  <div class="card-header">
   <h4>card</h4>
  </div>
  <div class="card-body">
   <h4 class="card-title">title</h4>
   <p class="card-text">description...</p>
   <a href="#" class="card-link">action</a>
   <a href="#" class="card-link">action</a>
  </div>
  <div class="card-footer">footer</div>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.一開始父元素為.card，之後子元素卡片的架構為.card-header(上層)、.card-body(內容)、.card-footer(下層)
2.屬性.card-body的架構有.card-title、.card-text、.card-link
3.屬性.card-title為標題、.card-text為文字內容、.card-link為連結
4.屬性.text-center讓整個卡片的文字都置中

二.簡單卡片圖片內容樣式

<div id="demo" class="component">
 <div class="card text-center" style="width: 18rem;">
  <img src="https://www.crazyppt.com/wp-content/uploads/2018/10/1-1P920091I8.jpg" alt="" class="card-img-top">
  <div class="card-body">
   <h4 class="card-title">title</h4>
   <p class="card-text">description...</p>
   <a href="#" class="card-link">action</a>
   <a href="#" class="card-link">action</a>
  </div>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.這裏為簡單的卡片樣式，把.card-header與card-footer拿掉。
2.在上層加一個img，且在img的class加一個.card-img-top，讓img的圖片能對齊到上層並且讓上層有圓角的效果。

三.將文字覆蓋到圖片上

<div id="demo" class="component">
 <div class="card text-center text-white" style="width: 18rem;">
  <img src="https://www.crazyppt.com/wp-content/uploads/2018/10/1-1P920091I8.jpg" alt="" class="card-img">
  <div class="card-img-overlay">
   <h4 class="card-title">title</h4>
   <p class="card-text">description...</p>
   <a href="#" class="card-link">action</a>
   <a href="#" class="card-link">action</a>
  </div>
 </div>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.卡片的文字覆蓋到圖片上，將.card-body改成.card-img-overlay
2.再將card-img-top改成card-img讓四周的圖片都有圓角
3.在.card這層加入.text-white讓文字變成白色

codepen
參考：bootstrap4