부트스트랩4에 있는 카드는 컨텐츠 주위에 약간의 여백 그리고 테두리가 있는 상자입니다. 머리글, 바닥글, 내용, 색상 등에 대한 옵션을 포함합니다.

** 부트스트랩4의 카드는 부트스트랩3의 panels, wells, thumbnails을 대체합니다.

기본 카드

.card클래스로 만들어지며, 카드 안의 내용은 .card-body클래스를 갖습니다.

 <div class="card">   
<div class="card-body">기본 카드</div>
</div>

머리글과 바닥글(Header & Footer)

.card-header클래스는 머리글을 .card-footer클래스는 바닥글을 추가하는데 사용합니다.

<div class="card">
    <div class="card-header">머리글</div>
    <div class="card-body">내용본문</div> 
    <div class="card-footer">바닥글</div>
</div>

문맥 카드

문맥에 맞게 배경색을 추가하려면 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light 클래스를 추가합니다.

<div class="card">
    <div class="card-body">Basic card</div>
</div>
<div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
</div>
<div class="card bg-success text-white">
    <div class="card-body">Success card</div>
</div>
<div class="card bg-info text-white">
    <div class="card-body">Info card</div>
</div>
<div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
</div>
<div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
</div>
<div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
</div>
<div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
</div>
<div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
</div>

Titles, text, links

HTML 제목 요소에 카드 제목을 추가하려면 .card-title을 사용합니다. 

.card-text클래스는 카드 블록의 마지막 자식인 경우<p>요소의 하단 여백을 제거하는데 사용됩니다.

.card-link클래스는 카드내 모든 링크에 파란색을 추가하고 호버 효과를 추가합니다.

<div class="card">
    <div class="card-body">
      <h4 class="card-title">실전홈페이지제작강좌</h4>
      <p class="card-text">모든 유료강좌를 무료로 이용할 수 있습니다.</p>
      <a href="#" class="card-link">실전홈페이지제작강좌</a>
      <a href="#" class="card-link">CSS Grid강좌</a>
      <a href="#" class="card-link">PHP강좌</a>
    </div>
</div>

카드 이미지

<img>요소에 .card-img-top 또는 .card-img-bottom을 추가하여 카드의 위쪽이나 아래쪽에 이미지를 배치합니다.

<div class="card" style="width:400px">
  <img class="card-img-top" src="card.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">홍길동</h4>
    <p class="card-text">웹엔지니어입니다.</p>
    <a href="#" class="btn btn-primary">프로필보기</a>
  </div>
</div>

카드 이미지 오버레이

이미지를 카드 배경으로 지정하고 .card-img-overlay 클래스를 사용하여 이미지 위에 텍스트를 추가할 수 있습니다.

<div class="card img-fluid" style="width:400px">
    <img class="card-img-top" src="card.jpg" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">세종대왕</h4>
      <p class="card-text" style="margin-top:350px;">세종대왕은 인류역사상 가장 위대한 인물입니다. 가장 과학적인 한글을 만든 왕입니다.</p>
      <a href="#" class="btn btn-primary">프로필보기</a>
    </div>
</div>

 ** 위 코드에서 style="margin-top:350px"은 이미지 위 텍스트가 잘 안보여서 임으로 추가한 css입니다.