부트스트랩 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>