목차
Card 정의 Card 기본 Card Header (머리글) / Footer (꼬리말) Card Color (배경색깔) Card Title (제목) / Text (텍스트) / Link (링크) Card Image (이미지) Card Stretch Link (링크 영역/범위 확대) Card Image Overlay (이미지 위에 배치) Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태 BS5에서 제거된 클래스 2개
Card 정의
내용 주위에 약간의 패딩 있는 테두리 있는 상자.
headers (머리글), footers(꼬리말), content (내용), colors (색깔) 옵션 포함.
BS3의 panel, well, thumbnail 등 대체.
Card 기본
<div class="card ">
<div class="card-body ">내용</div>
</div>
결과보기
※ BS4와 동일
Card Header (머리글) / Footer (꼬리말)
※ 머리말/꼬리말 부분은 연회색 배경으로 표시됨.
<div class="card ">
<div class="card-header ">머리글</div>
<div class="card-body ">내용</div>
<div class="card-footer ">꼬리말</div>
</div>
결과보기
※ BS4와 동일
Card Color (배경색깔)
<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>
결과보기
※ BS4와 동일
Card Title (제목) / Text (텍스트) / Link (링크)
<div class="card ">
<div class="card-body ">
<h4 class="card-title ">제목</h4>
<p class="card-text ">내용</p>
<a href="#" class="card-link ">링크1</a>
<a href="#" class="card-link ">링크2</a>
</div>
</div>
결과보기
※ BS4와 동일
Card Image (이미지)
.card-img-top 클래스 - 이미지가 .card-body 위에 있을 때
.card-img-bottom 클래스 - 이미지가 .card-body 아래에 있을 때
<div class="card" style="width:400px">
<img class="card-img-top" src="https://source.unsplash.com/random" alt="상단 이미지" style="width:100%">
<div class="card-body">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary">링크</a>
</div>
</div>
<br>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary">링크</a>
</div>
<img class="card-img-bottom" src="https://source.unsplash.com/random" alt="하단 이미지" style="width:100%">
</div>
결과보기
※ BS4와 동일
Card Stretch Link (링크 영역/범위 확대)
※ 한 줄 전체 링크 걸기: <a> 태그에 .d-flex 클래스 추가
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary d-flex ">링크</a>
</div>
</div>
결과보기
Card Image Overlay (이미지 위에 배치)
<div class="card img-fluid " style="width:500px">
<img class="card-img-top" src="https://source.unsplash.com/random" alt="상단 이미지" style="width:100%">
<div class="card-img-overlay ">
<h4 class="card-title">제목</h4>
<p class="card-text">내용</p>
<a href="#" class="btn btn-primary">링크</a>
</div>
</div>
결과보기
PS.
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
border-radius: calc(0.25rem - 1px);
}
※ BS4와 동일.
Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태
.card-group 클래스 - 카드가 여러 개인 경우 카드 배치 방식 결정
576px 이상 : 카드를 수평 배치. (옆으로 딱 붙임.)
576px 미만 : 카드를 수직 배치. (하단 마진 0.75rem 적용)
<div class="card-group ">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">내용1</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">내용2</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">내용3</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">내용4</p>
</div>
</div>
</div>
결과보기
PS.
.card-group > .card {
margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
.card-group {
display: flex;
flex-flow: row wrap;
}
.card-group > .card {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group > .card + .card {
margin-left: 0;
border-left: 0;
}
.card-group > .card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
border-top-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
border-bottom-right-radius: 0;
}
.card-group > .card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
border-top-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
border-bottom-left-radius: 0;
}
}
※ BS4와 동일
BS5에서 제거된 클래스 2개
.card-columns 클래스 - column 높이 다르며, 서로 떨어진 형태.card-deck 클래스 - Column 높이 동일하며, 서로 떨어진 형태
