부트스트랩 4 카드

Bootstrap 4의 카드는 콘텐츠 주위에 패딩이 있는 테두리가 있는 상자다.
여기에는 머리글, 바닥글, 내용, 색상 등에 대한 옵션이 포함된다.

기본 카드

기본 카드는 .card 클래스로 생성되며 카드 내부의 콘텐츠에는 .card-body 클래스가 있다.

예제

<div class="card">
  <div class="card-body">Basic card</div>
</div>

머리글과 바닥 글

.card-header 클래스는 카드에 제목을 추가하고 .card-footer 클래스는 카드에 바닥글을 추가한다.

예제

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">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>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>

제목, 텍스트, 링크

.card-title 클래스는 제목 요소에 카드 제목을 추가하는 데 사용된다.
.card-text 클래스는 <p> 요소가 내부의 마지막 자식(또는 유일한 자식)인 경우 해당 .card-body 요소의 아래쪽 여백을 제거하는 데 사용된다.
.card-link 클래스는 링크에 파란색을 추가하고 호버 효과를 추가한다.

예제

<div class="card">
  <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>
  </div>
</div>

카드 이미지

카드 내부의 상단이나 하단에 이미지를 배치하려면 .card-body 에 .card-img-top 또는 .card-img-bottom 를 추가한다.

예제

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

늘어난 링크

카드 내부의 링크에 .stretched-link 클래스를 추가하면 전체 카드를 클릭하고 가리킬 수 있게 된다.
카드가 링크 역할을 한다.

예제

<a href="#" class="btn btn-primary stretched-link">See Profile</a>

카드 이미지 오버레이

이미지를 카드 배경으로 바꾸고 이미지 위에 텍스트를 추가하는 데 사용한다.

예제

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

카드 컬럼

.card-columns 클래스는 벽돌 모양의 카드 그리드(예: pinterest)를 만든다.
더 많은 카드를 삽입하면 레이아웃이 자동으로 조정된다.

⭐ 카드는 작은 화면(576px 미만)에 세로로 표시된다.

예제

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

카드덱

.card-deck 클래스는 높이와 너비가 동일한 카드 그리드를 만든다.
더 많은 카드를 삽입하면 레이아웃이 자동으로 조정된다.

⭐ 카드는 작은 화면(576px 미만)에 세로로 표시된다.

예제

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

카드 그룹

.card-group 클래스는 .card-deck과 비슷하다.
유일한 차이점은 .card-group 클래스가 각 카드 사이의 왼쪽 및 오른쪽 여백을 제거한다는 것이다.

⭐ 카드는 작은 화면(576px 미만)에 위쪽 및 아래쪽 여백을 두고 세로로 표시된다.

예제

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>