<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
卡片支援各種內容，包含圖片、文字、清單群組、連結等。以下為卡片支援的範例。
卡片的建構區塊為
.card-body
。當你需要在卡片填充內容的時候請使用它。
This is some text within a card body.
<divclass="card"><divclass="card-body">
This is some text within a card body.
</div></div>
<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Card title</h5><h6class="card-subtitle mb-2 text-muted">Card subtitle</h6><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div>
設定
.card-img-top
將會把圖片放在卡片的頂部。使用
.card-text
可以將文字內容可以添加到卡片中。
.card-text
中的文本也可以用標準的 HTML 標籤設計樣式。
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><pclass="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-group-flush
在卡片內建立列表群組。
An item
A second item
A third item
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></div>
Featured
An item
A second item
A third item
<divclass="card"style="width: 18rem;"><divclass="card-header">
Featured
</div><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></div>
An item
A second item
A third item
Card footer
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><divclass="card-footer">
Card footer
</div></div>
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div>
頁首和頁尾
在卡片內添加選擇性的頁首和/或頁尾。
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<divclass="card"><divclass="card-header">
Featured
</div><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
卡片頁首的樣式可以透過在
<h*>
元素添加
.card-header
來調整。
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<divclass="card"><h5class="card-header">Featured</h5><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
Quote
A well-known quote, contained in a blockquote element.
<divclass="card"><divclass="card-header">
Quote
</div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>A well-known quote, contained in a blockquote element.</p><footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer></blockquote></div></div>
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<divclass="card text-center"><divclass="card-header">
Featured
</div><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div><divclass="card-footer text-muted">
2 days ago
</div></div>
With supporting text below as a natural lead-in to additional content.
Go somewhere
<
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
>
With supporting text below as a natural lead-in to additional content.
Button
<
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 或使用行內樣式設置寬度。
Special title treatment
With supporting text below as a natural lead-in to additional content.
<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div><divclass="card text-center"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div><divclass="card text-end"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"aria-current="true"href="#">Active</a><liclass="nav-item"><aclass="nav-link"href="#">Link</a><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></div><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
Special title treatment
With supporting text below as a natural lead-in to additional content.
<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a><liclass="nav-item"><aclass="nav-link"href="#">Link</a><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></div><divclass="card-body"><h5class="card-title">Special title treatment</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div>
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<divclass="card mb-3"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div><imgsrc="..."class="card-img-bottom"alt="..."></div>
圖片 overlay
將圖片轉換為卡片背景，並疊加卡片的文字。 根據圖片，你可以選擇是否需要額外的樣式或通用類別。
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<divclass="card bg-dark text-white"><imgsrc="..."class="card-img"alt="..."><divclass="card-img-overlay"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text">Last updated 3 mins ago</p></div></div>
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<divclass="card mb-3"style="max-width: 540px;"><divclass="row g-0"><divclass="col-md-4"><imgsrc="..."alt="..."></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div></div>
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Primary card title</h5><pclass="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><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Secondary card title</h5><pclass="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><divclass="card text-white bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Success card title</h5><pclass="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><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Danger card title</h5><pclass="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><divclass="card text-dark bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Warning card title</h5><pclass="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><divclass="card text-dark bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Info card title</h5><pclass="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><divclass="card text-dark bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light card title</h5><pclass="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><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Dark card title</h5><pclass="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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the
.visually-hidden
class.
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card border-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-primary"><h5class="card-title">Primary card title</h5><pclass="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><divclass="card border-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-secondary"><h5class="card-title">Secondary card title</h5><pclass="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><divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-success"><h5class="card-title">Success card title</h5><pclass="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><divclass="card border-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-danger"><h5class="card-title">Danger card title</h5><pclass="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><divclass="card border-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Warning card title</h5><pclass="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><divclass="card border-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Info card title</h5><pclass="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><divclass="card border-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light card title</h5><pclass="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><divclass="card border-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-dark"><h5class="card-title">Dark card title</h5><pclass="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>
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header bg-transparent border-success">Header</div><divclass="card-body text-success"><h5class="card-title">Success card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><divclass="card-footer bg-transparent border-success">Footer</div></div>
使用卡片群組將一系列卡片呈現為具有等寬、高欄位的單一、連結元素。卡片群組由堆疊開始，並透過
display: flex;
從
sm
的斷點後開始以統一的尺寸相連接。
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>
當在卡片群組使用頁尾，它們的內容將會自動對齊。
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></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. 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
=
"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
>
<divclass="row row-cols-1 row-cols-md-3 g-4"><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">This is a short card.</p></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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>
如同卡片群組，卡片頁尾也會自動對齊。
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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.
Last updated 3 mins ago
<divclass="row row-cols-1 row-cols-md-3 g-4"><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div></div>
