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>タイトル、テキスト、リンク
カードタイトルは、<h*>タグに.card-titleを追加することで使用します。同様に、リンクは<a>タグに.card-linkを追加することで追加し、隣り合わせに配置します。
サブタイトルは、<h*>タグに.card-subtitleを追加することで使用します。.card-titleと.card-subtitleアイテムを.card-bodyアイテムに配置すると、カードタイトルとサブタイトルがきれいに揃います。
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-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>リストグループ
フラッシュリストグループを使用して、カード内にコンテンツのリストを作成します。
- アイテム
- 2番目のアイテム
- 3番目のアイテム
<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>おすすめ
- アイテム
- 2番目のアイテム
- 3番目のアイテム
<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>- アイテム
- 2番目のアイテム
- 3番目のアイテム
<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>カードヘッダーは、<h*>要素に.card-headerを追加することでスタイル設定できます。
おすすめ
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>引用
ブロッククォート要素に含まれる、よく知られた引用です。
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<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>おすすめ
<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のnavコンポーネントを使用して、カードのヘッダー（またはブロック）にナビゲーションを追加します。
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" 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>画像オーバーレイ
画像をカードの背景に変え、カードのテキストを重ねます。画像によっては、追加のスタイルやユーティリティが必要になる場合と、ならない場合があります。
<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のみを変更するには、ボーダーユーティリティを使用します。以下に示すように、親.cardまたはカードの内容のサブセットに.text-{color}クラスを配置できることに注意してください。
ヘッダー
プライマリカードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
セカンダリカードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
成功カードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
危険カードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
警告カードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
情報カードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
ライトカードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
ヘッダー
ダークカードタイトル
カードタイトルに基づいて構築し、カードのコンテンツの大部分を構成する、いくつかの簡単な例テキストです。
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body 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にはカードのシリーズをレイアウトするためのいくつかのオプションが含まれています。現時点では、これらのレイアウトオプションはまだレスポンシブではありません。
カードグループ
カードグループを使用して、幅と高さが等しいカラムを持つ単一の接続された要素としてカードを表示します。カードグループはスタックして始まり、smブレークポイントからdisplay: flex;を使用して、均一な寸法で接続されます。
カードタイトル
これは、下に補助テキストがあり、追加のコンテンツへの自然な導入となる、幅の広いカードです。このコンテンツは少し長いです。
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>フッター付きのカードグループを使用する場合、そのコンテンツは自動的に揃います。
カードタイトル
これは、下に補助テキストがあり、追加のコンテンツへの自然な導入となる、幅の広いカードです。このコンテンツは少し長いです。
カードタイトル
このカードには、追加のコンテンツへの自然な導入として、下に補助テキストがあります。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、幅の広いカードです。このカードには、等しい高さのアクションを示すために、最初のカードよりもさらに長いコンテンツがあります。
<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>カードグループと同様に、デッキのカードフッターは自動的に揃います。
カードタイトル
これは、下に補助テキストがあり、追加のコンテンツへの自然な導入となる、幅の広いカードです。このコンテンツは少し長いです。
カードタイトル
このカードには、追加のコンテンツへの自然な導入として、下に補助テキストがあります。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、幅の広いカードです。このカードには、等しい高さのアクションを示すために、最初のカードよりもさらに長いコンテンツがあります。
<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がカードを1列にレイアウトし、.row-cols-md-2がミディアムブレークポイント以降、4つのカードを複数の行にわたって等しい幅に分割しています。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
<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に変更すると、4番目のカードが折り返されます。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。
カードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
<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プロパティを使用して構築されています。カードは上から下、左から右の順序で配置されます。
ご注意ください！ カードカラムにおける表示は、環境によって異なる場合があります。カードがカラムをまたがって分割されるのを防ぐには、column-break-inside: avoid はまだ完全な解決策ではないため、display: inline-block を設定する必要があります。
改行されるカードタイトル
これは、追加のコンテンツへの自然な導入として、下に補助テキストがある、長いカードです。このコンテンツは少し長いです。
ブロッククォート要素に含まれる、よく知られた引用です。
カードタイトル
このカードには、追加のコンテンツへの自然な導入として、下に補助テキストがあります。
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>カードカラムは、追加のコードを使用して拡張およびカスタマイズすることもできます。以下に示すのは、私たちが使用しているCSS（CSSカラム）と同じCSSを使用して、カラム数の変更に対応する複数のレスポンシブなティアを生成する.card-columnsクラスの拡張です。
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}