[basic] BS5 - Card (BS카드)

1. Card 정의
2. Card 기본
3. Card Header (머리글) / Footer (꼬리말)
4. Card Color (배경색깔)
5. Card Title (제목) / Text (텍스트) / Link (링크)
6. Card Image (이미지)
7. Card Stretch Link (링크 영역/범위 확대)
8. Card Image Overlay (이미지 위에 배치)
9. Card Group (그룹) - Column 높이 동일하며 서로 붙은 형태
10. 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 높이 동일하며, 서로 떨어진 형태