在 GitHub 上檢視

卡片

Bootstrap 的卡片提供一個彈性且可擴充的內容容器，具有多種變體和選項。

關於

卡片是一個彈性且可擴充的內容容器。它包含標頭和頁尾的選項、各種內容、背景色彩和強大的顯示選項。如果您熟悉 Bootstrap 3，卡片取代了我們舊的面板、區塊和縮圖。這些元件的類似功能可作為卡片的修改器類別使用。

範例

卡片採用盡可能少的標記和樣式建置，但仍能提供大量的控制和自訂功能。採用彈性盒建置，提供簡易對齊，並能與其他 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;">
  <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>

綜合範例

混合和搭配多種內容類型，以建立您需要的卡片，或將所有內容都放入其中。以下顯示的範例包括圖片樣式、區塊、文字樣式和清單群組，全部都包覆在固定寬度的卡片中。

卡片標題

一些快速範例文字，用於建立在卡片標題上，並構成卡片內容的大部分。

一個項目
第二個項目
第三個項目

卡片連結另一個連結

<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>

引言

一個著名的引言，包含在區塊引用元素中。

某個名人，出自來源標題

<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-right" 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" 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">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">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>

請注意，內容不應大於圖片的高度。如果內容大於圖片，內容將顯示在圖片外。

水平

使用格線和工具程式類別的組合，可以讓卡片以行動友善且回應式的方式呈現為水平。在以下範例中，我們使用 .no-gutters 移除了格線間距，並使用 .col-md-* 類別，讓卡片在 md 斷點處呈現為水平。根據您的卡片內容，可能需要進一步調整。

卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然導言。這段內容稍長。

最後更新於 3 分鐘前

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." 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-white 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-white 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 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>

傳達輔助技術的含義

僅使用顏色來增加含義會提供視覺指示，而不會傳達給輔助技術（例如螢幕閱讀器）的使用者。請確保由顏色表示的資訊在內容本身中很明顯（例如可見文字），或透過其他方式包含，例如使用 .sr-only 類別隱藏的附加文字。

邊框

使用邊框工具程式僅變更卡片的 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 text-warning">
    <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 text-info">
    <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>

混合工具程式

您也可以視需要變更卡片標頭和頁尾的邊框，甚至使用 .bg-transparent 移除其 background-color。

標頭

成功卡片標題

一些快速範例文字，用於建立在卡片標題上，並構成卡片內容的大部分。

頁尾

<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>

卡片組

需要一組相等寬度和高度，但彼此未附加的卡片嗎？請使用卡片組。

卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。此內容稍長。

最後更新於 3 分鐘前

卡片標題

這張卡片下方有支援文字，作為其他內容的自然引導。

最後更新於 3 分鐘前

卡片標題

這是一張較寬的卡片，下方有支援文字，作為其他內容的自然引導。這張卡片的內容比第一張更長，以顯示相等高度的動作。

最後更新於 3 分鐘前

<div class="card-deck">
  <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>
      <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-deck">
  <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 將四張卡片平均分配到多列中，從中斷點開始。

卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。此內容稍長。

卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。此內容稍長。

卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。

卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。此內容稍長。

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

卡片欄

卡片可以透過將它們包覆在 .card-columns 中，使用 CSS 以類似 Masonry 的欄位來組織。卡片是使用 CSS column 屬性建立的，而非使用 flexbox，以利於對齊。卡片從上到下、從左到右排序。

注意！您使用卡片欄位的里程數可能會有所不同。為防止卡片在欄位中斷行，我們必須將它們設定為 display: inline-block，因為 column-break-inside: avoid 尚未成為萬無一失的解決方案。

換行到新行的卡片標題

這是一張較長的卡片，下方有支援文字，作為其他內容的自然引導。此內容稍長。

一個著名的引言，包含在區塊引用元素中。

某個名人，出自來源標題

卡片標題

這張卡片下方有支援文字，作為其他內容的自然引導。

最後更新於 3 分鐘前

一個著名的引言，包含在區塊引用元素中。

某個名人，出自來源標題

卡片標題

這張卡片有一個一般標題和在下方的一小段文字。

最後更新於 3 分鐘前

一個著名的引言，包含在區塊引用元素中。

某個名人，出自來源標題

卡片標題

這是另一張在下方有標題和說明文字的卡片。這張卡片有一些額外的內容，讓它整體上稍微高一些。

最後更新於 3 分鐘前

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

卡片欄位也可以透過一些額外的程式碼來延伸和自訂。下方顯示的是 .card-columns 類別的延伸，使用我們使用的相同 CSS（CSS 欄位）來產生一組用於變更欄位數目的回應層級。

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}