카드
카드 (Cards)
Bootstrap의 카드는 여러 변형과 옵션을 가진 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다.
출처: 문서
본문
소개 (About)
카드는 유연하고 확장 가능한 콘텐츠 컨테이너입니다. 헤더와 푸터 옵션, 다양한 콘텐츠, 맥락적 배경색, 강력한 표시 옵션을 포함합니다. Bootstrap 3에 익숙하다면, 카드는 이전의 패널(panels), 웰(wells), 썸네일(thumbnails)을 대체합니다. 그 컴포넌트들과 유사한 기능은 카드의 변형 클래스로 제공됩니다.
예제 (Example)
카드는 가능한 한 적은 마크업과 스타일로 만들어졌지만, 그래도 많은 제어와 커스터마이징을 제공합니다. flexbox로 만들어져 쉬운 정렬을 제공하고 다른 Bootstrap 컴포넌트와 잘 어울립니다. 기본적으로 마진이 없으므로 필요에 따라 간격 유틸리티를 사용하세요.
아래는 혼합 콘텐츠와 고정 너비를 가진 기본 카드의 예입니다. 카드는 처음에 고정 너비가 없어서 부모 요소의 전체 너비를 자연스럽게 채웁니다. 다양한 크기 옵션으로 쉽게 커스터마이즈할 수 있습니다.
<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>
콘텐츠 유형 (Content types)
카드는 이미지, 텍스트, 목록 그룹, 링크 등을 포함한 다양한 콘텐츠를 지원합니다. 아래는 지원되는 예시들입니다.
본문 (Body)
카드의 기본 구성 요소는 .card-body입니다. 카드 안에 패딩이 있는 섹션이 필요할 때마다 사용하세요.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
제목, 텍스트, 링크 (Titles, text, and links)
카드 제목은 <h*> 태그에 .card-title을 추가해 사용합니다. 마찬가지로 <a> 태그에 .card-link를 추가하면 링크가 추가되고 서로 나란히 배치됩니다.
부제목은 <h*> 태그에 .card-subtitle을 추가해 사용합니다. .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-body-secondary">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>
이미지 (Images)
.card-img-top과 .card-img-bottom은 각각 위·아래 모서리를 카드 테두리에 맞춰 둥글게 설정합니다. .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>
목록 그룹 (List groups)
플러시 목록 그룹으로 카드 안에 콘텐츠 목록을 만듭니다.
<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;">
<div class="card-header">
Featured
</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>
<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 class="card-footer">
Card footer
</div>
</div>
키친 싱크 (Kitchen sink)
여러 콘텐츠 유형을 섞고 매치해 필요한 카드를 만들거나, 모든 것을 한꺼번에 넣어보세요. 아래는 이미지 스타일, 블록, 텍스트 스타일, 목록 그룹을 모두 고정 너비 카드에 담은 예입니다.
<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>
헤더와 푸터 (Header and footer)
카드 안에 선택적 헤더 및/또는 푸터를 추가하세요.
<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>
카드 헤더는 <h*> 요소에 .card-header를 추가해 스타일링할 수 있습니다.
<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>
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<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-body-secondary">
2 days ago
</div>
</div>
크기 조정 (Sizing)
카드는 처음에 특정 너비를 가정하지 않으므로, 따로 지정하지 않는 한 100% 너비입니다. 커스텀 CSS, 그리드 클래스, 그리드 Sass 믹스인, 또는 유틸리티로 필요에 따라 변경할 수 있습니다.
그리드 마크업 사용 (Using grid markup)
그리드를 사용해 필요에 따라 카드를 컬럼과 로우로 감싸세요.
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<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>
유틸리티 사용 (Using utilities)
카드의 너비를 빠르게 설정할 수 있는 몇 가지 크기 유틸리티를 사용하세요.
<div class="card w-75 mb-3">
<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 사용 (Using custom 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>
텍스트 정렬 (Text alignment)
텍스트 정렬 클래스로 어떤 카드든 전체 또는 특정 부분의 텍스트 정렬을 빠르게 변경할 수 있습니다.
<div class="card mb-3" 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 mb-3" 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>
내비게이션 (Navigation)
Bootstrap의 nav 컴포넌트로 카드의 헤더(또는 블록)에 내비게이션을 추가하세요.
<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" 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" 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>
이미지 (Images)
카드는 이미지 작업을 위한 몇 가지 옵션을 포함합니다. 카드의 양 끝에 "이미지 캡(image caps)"을 붙이거나, 카드 콘텐츠 위에 이미지를 오버레이하거나, 단순히 카드에 이미지를 임베드하는 방법을 선택하세요.
이미지 캡 (Image caps)
헤더와 푸터와 비슷하게, 카드는 위·아래 "이미지 캡"—카드의 위나 아래에 있는 이미지—을 포함할 수 있습니다.
<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-body-secondary">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-body-secondary">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
이미지 오버레이 (Image overlays)
이미지를 카드 배경으로 만들고 카드의 텍스트를 오버레이하세요. 이미지에 따라 추가 스타일이나 유틸리티가 필요할 수도 있고 아닐 수도 있습니다.
<div class="card text-bg-dark">
<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"><small>Last updated 3 mins ago</small></p>
</div>
</div>
콘텐츠는 이미지의 높이보다 크지 않아야 합니다. 콘텐츠가 이미지보다 크면 콘텐츠가 이미지 바깥에 표시됩니다.
가로 (Horizontal)
그리드와 유틸리티 클래스를 조합하면 카드를 모바일 친화적이고 반응형으로 가로로 만들 수 있습니다. 아래 예시에서 .g-0으로 그리드 거터를 제거하고 .col-md-* 클래스를 사용해 md 브레이크포인트에서 카드를 가로로 만듭니다. 카드 콘텐츠에 따라 추가 조정이 필요할 수 있습니다.
<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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
카드 스타일 (Card styles)
카드는 배경, 테두리, 색을 커스터마이즈하기 위한 다양한 옵션을 포함합니다.
배경과 색 (Background and color) — v5.2.0에서 추가
.text-bg-{color} 헬퍼로 대비되는 전경색과 함께 background-color를 설정하세요. 이전에는 스타일링을 위해 .text-{color}와 .bg-{color} 유틸리티를 직접 짝지어야 했지만, 원한다면 여전히 그렇게 사용할 수 있습니다.
<div class="card text-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-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-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-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-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-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-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-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)
border 유틸리티를 사용해 카드의 border-color만 변경하세요. 아래처럼 부모 .card 또는 카드 콘텐츠의 일부에 .text-{color} 클래스를 넣을 수 있다는 점을 유의하세요.
<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">
<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>
믹스인 유틸리티 (Mixins utilities)
카드 헤더와 푸터의 테두리를 필요에 따라 변경할 수 있고, .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>
카드 레이아웃 (Card layout)
카드 안의 콘텐츠 스타일링 외에도, Bootstrap은 카드 시리즈를 배치하기 위한 몇 가지 옵션을 포함합니다. 현재 이러한 레이아웃 옵션은 아직 반응형이 아닙니다.
카드 그룹 (Card groups)
카드 그룹을 사용해 동일한 너비와 높이의 컬럼을 가진 하나의 연결된 요소로 카드를 렌더링하세요. 카드 그룹은 처음에 쌓인 상태로 시작하며 display: flex;를 사용해 sm 브레이크포인트부터 균일한 크기로 연결됩니다.
<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-body-secondary">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-body-secondary">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-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
카드 그룹에 푸터를 사용하면 그 콘텐츠가 자동으로 정렬됩니다.
<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-body-secondary">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-body-secondary">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-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
그리드 카드 (Grid cards)
Bootstrap 그리드 시스템과 그 .row-cols 클래스를 사용해 행당 보여줄 그리드 컬럼 수(카드 주위를 감싼)를 제어하세요. 예를 들어 여기 .row-cols-1은 카드를 한 컬럼으로 배치하고, .row-cols-md-2는 중간 브레이크포인트부터 네 개의 카드를 여러 행에 걸쳐 동일한 너비로 나눕니다.
<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을 추가하세요. 기본적으로 동일한 높이를 원한다면 Sass에서 $card-height: 100%를 설정할 수 있습니다.
<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>
카드 그룹과 마찬가지로 카드 푸터가 자동으로 정렬됩니다.
<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-body-secondary">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-body-secondary">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-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Masonry
v4에서는 Masonry 같은 컬럼의 동작을 흉내 내기 위해 CSS 전용 기법을 사용했지만, 이 기법은 많은 불쾌한 부작용을 가져왔습니다. v5에서 이런 레이아웃을 원한다면 Masonry 플러그인을 사용하기만 하면 됩니다. Masonry는 Bootstrap에 포함되지 않지만, 시작하는 데 도움이 되는 데모 예제를 만들어 두었습니다.
CSS
변수 (Variables) — v5.2.0에서 추가
Bootstrap의 진화하는 CSS 변수 접근 방식에 따라, 카드는 이제 .card에 로컬 CSS 변수를 사용해 실시간 커스터마이징을 강화합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 커스터마이징도 여전히 지원됩니다.
--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};
Sass 변수 (Sass variables)
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-title-color: null;
$card-subtitle-color: null;
$card-border-width: var(--#{$prefix}border-width);
$card-border-color: var(--#{$prefix}border-color-translucent);
$card-border-radius: var(--#{$prefix}border-radius);
$card-box-shadow: null;
$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(var(--#{$prefix}body-color-rgb), .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: var(--#{$prefix}body-bg);
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;