Skip to main content Skip to docs navigation
View on GitHub

カード Cards

Bootstrapのcardsは、複数のバリアントとオプションを備えた柔軟で拡張可能なコンテンツコンテナを提供します。

On this page

概要

cardは、柔軟で拡張可能なコンテンツコンテナです。ヘッダーとフッターのオプション、さまざまなコンテンツ、コンテキストに応じた背景色、強力な表示オプションが含まれています。Bootstrap 3に慣れている場合、cardは古いpanel、well、thumbnailに代わるものです。これらのコンポーネントと同様の機能は、cardのモディファイアクラスとして利用できます。

例

cardは、可能な限り少ないマークアップとスタイルで構築されていますが、それでも多くの制御とカスタマイズを提供できます。flexboxで構築されているため、簡単に配置でき、他のBootstrapコンポーネントとうまく組み合わせることができます。デフォルトでは margin がないため、必要に応じてspacing utilitiesを使用してください。

以下は、混合コンテンツと固定幅を持つ基本的なcardの例です。cardは最初は固定幅を持たないため、親要素の全幅を自然に埋めます。これは、さまざまなsizing optionsで簡単にカスタマイズできます。

PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
html 
<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

cardの構成要素は .card-body です。card内にパディング付きのセクションが必要な場合は、これを使用してください。

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

タイトル、テキスト、リンク

cardのタイトルは、<h*> タグに .card-title を追加することで使用されます。同様に、<a> タグに .card-link を追加することで、リンクが追加され、互いに隣り合わせに配置されます。

サブタイトルは、<h*> タグに .card-subtitle を追加することで使用されます。.card-title と .card-subtitle アイテムが .card-body アイテム内に配置されている場合、cardのタイトルとサブタイトルがきれいに整列されます。

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card’s content.

Card link Another link
html 
<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>

画像

.card-img-top と .card-img-bottom は、それぞれcardの境界線に合わせて上下の角を丸く設定します。.card-text を使用すると、cardにテキストを追加できます。.card-text 内のテキストは、標準のHTMLタグでスタイル設定することもできます。

PlaceholderImage cap

Some quick example text to build on the card title and make up the bulk of the card’s content.

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>

リストグループ

フラッシュリストグループを使用して、card内にコンテンツのリストを作成します。

  • An item
  • A second item
  • A third item
html 
<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>
Featured
  • An item
  • A second item
  • A third item
html 
<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>
  • An item
  • A second item
  • A third item
Card footer
html 
<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

複数のコンテンツタイプを組み合わせて必要なcardを作成するか、すべてをそこに入れることができます。以下に示すのは、画像スタイル、ブロック、テキストスタイル、リストグループで、すべて固定幅のcardにラップされています。

PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

  • An item
  • A second item
  • A third item
Card link Another link
html 
<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>

ヘッダーとフッター

card内にオプションのヘッダーとフッターを追加します。

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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のヘッダーは、<h*> 要素に .card-header を追加することでスタイル設定できます。

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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>
Quote

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
html 
<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>
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
html 
<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>

サイズ設定

cardは最初は特定の width を持たないため、特に記載がない限り100%の幅になります。カスタムCSS、gridクラス、grid Sass mixin、またはユーティリティを使用して、必要に応じてこれを変更できます。

Gridマークアップの使用

gridを使用して、必要に応じてcardを列と行でラップします。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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>

ユーティリティの使用

いくつかの利用可能なsizing utilitiesを使用して、cardの幅をすばやく設定します。

Card title

With supporting text below as a natural lead-in to additional content.

Button
Card title

With supporting text below as a natural lead-in to additional content.

Button
html 
<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の使用

スタイルシートまたはインラインスタイルでカスタムCSSを使用して、幅を設定します。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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 align classesを使用して、cardのテキストの配置を全体的に、または特定の部分をすばやく変更できます。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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>

ナビゲーション

Bootstrapのnav componentsを使用して、cardのヘッダー（またはブロック）にナビゲーションを追加します。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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>
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
html 
<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>

画像

cardには、画像を操作するためのいくつかのオプションが含まれています。cardの両端に「image caps」を追加するか、card contentで画像をオーバーレイするか、単にcardに画像を埋め込むかを選択してください。

Image caps

ヘッダーやフッターと同様に、cardには上部または下部の「image caps」（cardの上部または下部の画像）を含めることができます。

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

PlaceholderImage cap
html 
<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>

画像オーバーレイ

画像をcard backgroundにして、cardのテキストをオーバーレイします。画像によっては、追加のスタイルやユーティリティが必要になる場合とそうでない場合があります。

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

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

コンテンツは画像の高さよりも大きくしないでください。コンテンツが画像よりも大きい場合、コンテンツは画像の外側に表示されます。

水平方向

gridクラスとユーティリティクラスの組み合わせを使用すると、モバイルフレンドリーでレスポンシブな方法でcardを水平にすることができます。以下の例では、.g-0 でgrid gutterを削除し、.col-md-* クラスを使用して md ブレークポイントでcardを水平にしています。cardのコンテンツによっては、さらに調整が必要になる場合があります。

PlaceholderImage
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

html 
<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スタイル

cardには、背景、境界線、色をカスタマイズするためのさまざまなオプションが含まれています。

背景と色

Added in v5.2.0

.text-bg-{color} helpersを使用して、対照的な前景の color で background-color を設定します。以前は、スタイリングのために.text-{color}と.bg-{color}ユーティリティの選択を手動でペアリングする必要がありましたが、必要に応じてそれらを引き続き使用できます。

Header
Primary card title

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.

html 
<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 utilitiesを使用して、cardの border-color のみを変更します。以下に示すように、親の .card またはcardのコンテンツのサブセットに .text-{color} クラスを配置できることに注意してください。

Header
Primary card title

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.

html 
<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ユーティリティ

cardのヘッダーとフッターの境界線を必要に応じて変更したり、.bg-transparent で background-color を削除したりすることもできます。

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Footer
html 
<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レイアウト

card内のコンテンツのスタイリングに加えて、Bootstrapには一連のcardをレイアウトするためのいくつかのオプションが含まれています。現時点では、これらのレイアウトオプションはまだレスポンシブではありません。

Cardグループ

card groupsを使用して、等しい幅と高さの列を持つ単一の添付要素としてcardをレンダリングします。card groupsは積み重ねられた状態から始まり、display: flex; を使用して sm ブレークポイントから均一な寸法で添付されます。

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

PlaceholderImage cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

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

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

card groupsをフッターと一緒に使用すると、そのコンテンツが自動的に整列します。

PlaceholderImage cap
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
PlaceholderImage cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
PlaceholderImage cap
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
html 
<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 grid systemとその.row-cols classesを使用して、行ごとに表示するgrid columns（cardの周りにラップされている）の数を制御します。たとえば、.row-cols-1 は1つの列にcardをレイアウトし、.row-cols-md-2 は中サイズのブレークポイントから複数の行にわたって4つのcardを等しい幅に分割します。

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

html 
<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 に変更すると、4番目のcardがラップされるのがわかります。

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

等しい高さが必要な場合は、cardに .h-100 を追加します。デフォルトで等しい高さが必要な場合は、Sassで $card-height: 100% を設定できます。

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderImage cap
Card title

This is a short card.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderImage cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

card groupsと同様に、cardのフッターは自動的に整列します。

PlaceholderImage cap
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
PlaceholderImage cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
PlaceholderImage cap
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
html 
<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

変数

Added in v5.2.0

Bootstrapの進化するCSS変数アプローチの一環として、cardは .card でローカルCSS変数を使用してリアルタイムのカスタマイズを強化しています。CSS変数の値はSassを介して設定されるため、Sassのカスタマイズも引き続きサポートされています。

scss/_card.scss 
--#{$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変数

scss/_variables.scss 
$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;