카드

Bootstrap의 카드는 다양한 변형 및 옵션을 포함하는 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다.

이 페이지에서

에 대한

카드 는 유연하고 확장 가능한 콘텐츠 컨테이너입니다 . 여기에는 머리글 및 바닥글, 다양한 콘텐츠, 상황에 맞는 배경색 및 강력한 표시 옵션에 대한 옵션이 포함됩니다. Bootstrap 3에 익숙하다면 카드가 기존 패널, 우물 및 축소판을 대체합니다. 이러한 구성 요소와 유사한 기능을 카드의 수정자 클래스로 사용할 수 있습니다.

예시

카드는 가능한 한 적은 마크업과 스타일로 제작되지만 여전히 많은 제어 및 사용자 정의를 제공합니다. flexbox로 제작되어 쉽게 정렬할 수 있고 다른 Bootstrap 구성 요소와 잘 섞입니다. margin기본적으로 는 없으므로 필요에 따라 간격 유틸리티 를 사용하십시오.

다음은 콘텐츠가 혼합되고 너비가 고정된 기본 카드의 예입니다. 카드는 시작할 고정 너비가 없으므로 자연스럽게 부모 요소의 전체 너비를 채웁니다. 이것은 우리의 다양한 크기 옵션 으로 쉽게 사용자 정의할 수 있습니다 .

카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

어딘가에 가다

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

콘텐츠 유형

카드는 이미지, 텍스트, 목록 그룹, 링크 등을 포함한 다양한 콘텐츠를 지원합니다. 다음은 지원되는 항목의 예입니다.

신체

카드의 구성 요소는 .card-body. 카드 안에 패딩된 부분이 필요할 때마다 사용하세요.

이것은 카드 본문 내의 일부 텍스트입니다.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

제목, 텍스트 및 링크

카드 제목은 태그 에 추가 .card-title하여 사용합니다. 같은 방법 으로 태그 <h*>를 추가하면 링크가 추가되고 나란히 배치됩니다 ..card-link<a>

자막은 태그 에 추가 .card-subtitle하여 사용합니다. <h*>와 아이템을 .card-title아이템 에 넣으면 카드 제목과 부제목이 잘 정렬됩니다..card-subtitle.card-body

카드 제목

카드 자막

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

카드 링크 또 다른 링크

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

이미지

.card-img-top카드 상단에 이미지를 배치합니다. 를 사용 .card-text하여 카드에 텍스트를 추가할 수 있습니다. 안에 있는 텍스트 .card-text는 표준 HTML 태그로 스타일을 지정할 수도 있습니다.

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

그룹 나열

플러시 목록 그룹이 있는 카드에 콘텐츠 목록을 만듭니다.

아이템
두 번째 항목
세 번째 항목

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

부엌 싱크대

여러 콘텐츠 유형을 믹스 앤 매치하여 필요한 카드를 만들거나 모든 것을 던질 수 있습니다. 아래에는 이미지 스타일, 블록, 텍스트 스타일 및 목록 그룹이 나와 있으며 모두 고정 너비 카드에 래핑되어 있습니다.

카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

아이템
두 번째 항목
세 번째 항목

카드 링크 또 다른 링크

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

머리글과 바닥 글

카드 내에 선택적 머리글 및/또는 바닥글을 추가합니다.

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

카드 헤더는 요소 에 추가 .card-header하여 스타일을 지정할 수 있습니다.<h*>

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

인용하다

blockquote 요소에 포함된 잘 알려진 인용문.

Source Title 에서 유명한 사람

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

2일 전

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

사이징

카드는 특정 width시작을 가정하지 않으므로 달리 명시되지 않는 한 100% 너비가 됩니다. 사용자 정의 CSS, 그리드 클래스, 그리드 Sass 믹스인 또는 유틸리티를 사용하여 필요에 따라 이를 변경할 수 있습니다.

그리드 마크업 사용

그리드를 사용하여 필요에 따라 열과 행에 카드를 감쌉니다.

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

유틸리티 사용

사용 가능한 몇 가지 크기 조정 유틸리티 를 사용하여 카드 너비를 빠르게 설정하십시오.

카드 제목

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

단추

카드 제목

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

단추

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

사용자 정의 CSS 사용

스타일시트에서 또는 인라인 스타일로 사용자 정의 CSS를 사용하여 너비를 설정하십시오.

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

텍스트 정렬

텍스트 정렬 클래스 를 사용하여 전체 또는 특정 부분에서 모든 카드의 텍스트 정렬을 빠르게 변경할 수 있습니다 .

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap의 탐색 구성 요소 를 사용하여 카드의 헤더(또는 블록)에 탐색을 추가 합니다 .

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

특별 타이틀 처리

추가 콘텐츠에 대한 자연스러운 도입부로 아래의 지원 텍스트와 함께.

어딘가에 가다

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

이미지

카드에는 이미지 작업을 위한 몇 가지 옵션이 있습니다. 카드의 양쪽 끝에 "이미지 캡"을 추가하거나, 이미지에 카드 콘텐츠를 오버레이하거나, 단순히 카드에 이미지를 삽입하는 방법 중에서 선택하십시오.

이미지 캡

머리글 및 바닥글과 마찬가지로 카드에는 상단 및 하단 "이미지 캡"(카드 상단 또는 하단에 있는 이미지)이 포함될 수 있습니다.

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

이미지 오버레이

이미지를 카드 배경으로 바꾸고 카드의 텍스트를 오버레이합니다. 이미지에 따라 추가 스타일이나 유틸리티가 필요할 수도 있고 필요하지 않을 수도 있습니다.

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

콘텐츠는 이미지 높이보다 커서는 안 됩니다. 콘텐츠가 이미지보다 크면 콘텐츠가 이미지 외부에 표시됩니다.

수평의

그리드 및 유틸리티 클래스의 조합을 사용하여 카드를 모바일 친화적이고 반응적인 방식으로 가로로 만들 수 있습니다. 아래 예에서는 그리드 거터를 제거하고 클래스를 .g-0사용 하여 중단점 .col-md-*에서 카드를 수평으로 만듭니다 . md카드 내용에 따라 추가 조정이 필요할 수 있습니다.

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

카드 스타일

카드에는 배경, 테두리 및 색상을 사용자 지정할 수 있는 다양한 옵션이 있습니다.

배경 및 색상

텍스트 색상 및 배경 유틸리티 를 사용 하여 카드 모양을 변경합니다.

헤더

기본 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

보조 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

성공 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

위험 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

경고 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

정보 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

라이트 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

어두운 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

국경

테두리 유틸리티 를 사용 border-color하여 카드 만 변경 합니다. 아래와 같이 .text-{color}부모 또는 카드 내용의 하위 집합에 클래스를 넣을 수 있습니다..card

헤더

기본 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

보조 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

성공 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

위험 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

경고 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

정보 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

라이트 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

어두운 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

믹스인 유틸리티

필요에 따라 카드 머리글과 바닥글의 테두리를 변경하고 로 테두리를 제거할 수도 background-color있습니다 .bg-transparent.

헤더

성공 카드 제목

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

보행인

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

카드 레이아웃

카드 내의 콘텐츠 스타일 지정 외에도 Bootstrap에는 일련의 카드를 배치하기 위한 몇 가지 옵션이 있습니다. 당분간 이러한 레이아웃 옵션은 아직 반응하지 않습니다 .

카드 그룹

카드 그룹을 사용하여 카드를 동일한 너비와 높이 열이 있는 연결된 단일 요소로 렌더링합니다. 카드 그룹은 쌓인 상태 에서 시작하여 중단점 display: flex;에서 시작하여 균일한 치수로 부착되는 데 사용됩니다 .sm

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

카드 제목

이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.

3분 전에 마지막으로 업데이트됨

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 이 카드에는 동일한 높이의 액션을 보여주는 첫 번째 카드보다 훨씬 더 긴 콘텐츠가 있습니다.

3분 전에 마지막으로 업데이트됨

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

바닥글이 있는 카드 그룹을 사용하면 해당 콘텐츠가 자동으로 정렬됩니다.

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

카드 제목

이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.

3분 전에 마지막으로 업데이트됨

카드 제목

3분 전에 마지막으로 업데이트됨

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

그리드 카드

Bootstrap 그리드 시스템과 해당 .row-cols클래스 를 사용하여 행당 표시할 그리드 열(카드 주위에 래핑된) 수를 제어합니다. 예를 들어, 여기 .row-cols-1에 카드를 한 열에 배치 .row-cols-md-2하고 중간 중단점에서 위로 여러 행에 걸쳐 동일한 너비로 4개의 카드를 분할합니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

로 변경 .row-cols-3하면 네 번째 카드 랩이 표시됩니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

동일한 높이가 필요한 경우 .h-100카드에 추가하십시오. 기본적으로 동일한 높이를 원하면 $card-height: 100%Sass에서 설정할 수 있습니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

카드 제목

이것은 짧은 카드입니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다.

카드 제목

이것은 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있는 더 긴 카드입니다. 내용이 조금 더 깁니다.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

카드 그룹과 마찬가지로 카드 바닥글이 자동으로 정렬됩니다.

카드 제목

아래에 추가 콘텐츠로 자연스럽게 연결되는 지원 텍스트가 있는 더 넓은 카드입니다. 내용이 조금 더 깁니다.

3분 전에 마지막으로 업데이트됨

카드 제목

이 카드에는 추가 콘텐츠에 대한 자연스러운 도입으로 아래에 지원 텍스트가 있습니다.

3분 전에 마지막으로 업데이트됨

카드 제목

3분 전에 마지막으로 업데이트됨

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

석공 직

우리 는 Masonryv4 와 같은 기둥 의 동작을 모방하기 위해 CSS 전용 기술을 사용 했지만 이 기술에는 많은 불쾌한 부작용이 있었습니다. 에서 이러한 유형의 레이아웃을 사용하려면 Masonry 플러그인을 사용하면 됩니다. Masonry는 Bootstrap에 포함되어 있지 않지만 시작하는 데 도움이 되도록 데모 예제 를 만들었습니다 .v5

사스

변수

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

카드

에 대한

예시

카드 제목

콘텐츠 유형

신체

제목, 텍스트 및 링크

카드 제목

카드 자막

이미지

그룹 나열

부엌 싱크대

카드 제목

머리글과 바닥 글

특별 타이틀 처리

추천

특별 타이틀 처리

특별 타이틀 처리

사이징

그리드 마크업 사용

특별 타이틀 처리

특별 타이틀 처리

유틸리티 사용

카드 제목

카드 제목

사용자 정의 CSS 사용

특별 타이틀 처리

텍스트 정렬

특별 타이틀 처리

특별 타이틀 처리

특별 타이틀 처리

항해

특별 타이틀 처리

특별 타이틀 처리

이미지

이미지 캡

카드 제목

카드 제목

이미지 오버레이

카드 제목

수평의

카드 제목

카드 스타일

배경 및 색상

기본 카드 제목

보조 카드 제목

성공 카드 제목

위험 카드 제목

경고 카드 제목

정보 카드 제목

라이트 카드 제목

어두운 카드 제목

보조 기술에 의미 전달

국경

기본 카드 제목

보조 카드 제목

성공 카드 제목

위험 카드 제목

경고 카드 제목

정보 카드 제목

라이트 카드 제목

어두운 카드 제목

믹스인 유틸리티

성공 카드 제목

카드 레이아웃

카드 그룹

카드 제목

카드 제목

카드 제목

카드 제목

카드 제목

카드 제목

그리드 카드

카드 제목

카드 제목

카드 제목

카드 제목

카드 제목

카드 제목

카드 제목