メインコンテンツへスキップ

カード(Cards)

Bootstrapのカードは、複数のバリエーションとオプションを備えた柔軟で拡張可能なコンテンツコンテナを提供。

概要(About)

カードは、柔軟で拡張できるコンテンツコンテナであり、ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている。Bootstrap3に精通している場合は、かつてのパネル(Panels)、囲み枠(Wells)、サムネイル(Thumbnails)が、カードに置き換えられる。これらのコンポーネントと同様の機能をカードの修飾子クラスとして利用できる。

 

基本のカードの設定(Example)

カードはできるだけ少ないマークアップとスタイルで構築されるが、それでも大量の制御とカスタマイズを実現。Flexboxで構築されているため、簡単に配置ができ、他のBootstrapコンポーネントとうまく組み合わせられる。デフォルトでは余白の設定がないので、必要に応じて空白ユーティリティを使用する。

以下は、内容が混在し、幅が固定された基本カードの例。カードには固定幅がないので、親要素の幅いっぱいに広がる。これは、様々なサイズオプションで簡単にカスタマイズできる。

見本
プレースホルダカードの画像
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。カードのコンテンツ カードのコンテンツ

ボタン
設定例
<div class="card" style="width: 18rem;">
  <img src="..." alt="カードの画像" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。カードのコンテンツ カードのコンテンツ</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
【設定】

 

コンテンツタイプ(Content types)

カードは、画像、テキスト、リストグループ、リンクなど、多種多様なコンテンツをサポートしている。サポートされているものの例を以下に示す。

ボディ(Body)

カードを構築するボディは .card-body 。カードの中に中身があるセクションが必要なときはいつでもそれを使用すること。

見本

div.card > div.card-body

これはカードボディ内のテキスト。

div.card.card-body

これもカードボディ内のテキスト。
設定例
div.card > div.card-body<div class="card">
  <div class="card-body">
    これはカードボディ内のテキスト。
  </div>
</div>
div.card.card-body<div class="card card-body">
  これもカードボディ内のテキスト。
</div>
【設定】
  • div.card > div.card-body
    ※ div.card > div.card-body は、他にコンテンツ要素がなければ、div.card.card-body でも可

カードタイトルは、<h*> タグに .card-title を追加して使用。同様に、<a> タグに .card-link を追加することによって、リンクが追加され、相互に隣接して配置される。

サブタイトルは、<h*> タグに .card-subtitle を追加して使用。.card-title.card-subtitle のアイテムが .card-body アイテムに置かれていると、カードのタイトルとサブタイトルがうまく一致する。

見本
カードのタイトル
カードのサブタイトル

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

リンク1 リンク2
設定例
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <h6 class="card-subtitle mb-2 text-muted">カードのサブタイトル</h6>
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
    <a href="#" class="card-link">リンク1</a>
    <a href="#" class="card-link">リンク2</a>
  </div>
</div>
【設定】
  • コンテンツにカードのタイトルを付ける場合:div.card-body > h*.card-title
  • コンテンツにカードのサブタイトルを付ける場合:div.card-body > h*.card-subtitle.mb-2.text-muted
  • コンテンツにテキストを入れる場合:div.card-body > p.card-text
  • コンテンツに複数のリンクを横並びにする場合:div.card-body > a.card-link + a.card-link

イメージ(Images)

.card-img-topは画像をカードの上に置く。.card-text では、テキストをカードに追加できる。.card-text 内のテキストは、デフォルトのHTMLタグでスタイルを設定できる。

見本
プレースホルダカードの画像

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

設定例
<div class="card" style="width: 18rem;">
  <img src="..." alt="カードの画像" class="card-img-top">
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
  </div>
</div>
【設定】
  • イメージを付ける場合は div.card > img.card-img(-{side}).card-img(-{side} の種類は画像の配置に記載)

リストグループ(List groups)

フラッシュリストグループを持つカード内のコンテンツのリストを作成。

1. 基本の設定

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">アイテム1</li>
    <li class="list-group-item">アイテム2</li>
    <li class="list-group-item">アイテム3</li>
  </ul>
</div>

2. ヘッダ付き

見本
カードのヘッダ
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<div class="card" style="width: 18rem;">
  <div class="card-header">
    カードのヘッダ
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">アイテム1</li>
    <li class="list-group-item">アイテム2</li>
    <li class="list-group-item">アイテム3</li>
  </ul>
</div>

3. フッタ付き

見本
  • アイテム1
  • アイテム2
  • アイテム3
設定例
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">アイテム1</li>
    <li class="list-group-item">アイテム2</li>
    <li class="list-group-item">アイテム3</li>
  </ul>
  <div class="card-footer">
    カードのフッタ
  </div>
</div>
【設定】
  • リストグループを追加する場合は div.card > ul.list-group.list-group-flush ・・・ (※リストグループ

引用(Blockquote)v5.0.0-alpha1設定変更

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="card">
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
    <figure class="mb-0">
      <blockquote class="blockquote">
        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      </blockquote>
      <figcaption class="blockquote-footer mb-0">引用元-<cite title="Source Title">Source Title</cite></figcaption>
    </figure>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="card">
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
    <blockquote class="blockquote mb-0">
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <footer class="blockquote-footer">引用元-<cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
【設定】
  • コンテンツに引用を付ける場合:div.card-body > figure.mb-0 > blockquote.blockquote(または figure.card-body.mb-0 > blockquote.blockquote
【変更履歴】

キッチンシンク(Kitchen sink)

必要なカードを作成するために複数のコンテンツタイプをミックスしたりマッチさせたり、そこにすべてを投げ込む。以下に示すのは、画像スタイル、ブロック、テキストスタイルとリストグループをすべて固定幅のカードで囲んだもの。

見本
プレースホルダカードの画像
カードのタイトル

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

  • アイテム1
  • アイテム2
  • アイテム3
設定例
<div class="card" style="width: 18rem;">
  <img src="..."& class="card-img-top" alt="カードの画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">アイテム1</li>
    <li class="list-group-item">アイテム2</li>
    <li class="list-group-item">アイテム3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">リンク1</a>
    <a href="#" class="card-link">リンク2</a>
  </div>
</div>
【設定】
  • イメージを付ける場合は div.card > img.card-img(-{side}).card-img(-{side} の種類は画像の配置に記載)
  • リストグループを追加する場合は div.card > ul.list-group.list-group-flush ・・・ (※リストグループ
  • コンテンツにカードのタイトルを付ける場合は div.card-body > h*.card-title
  • コンテンツにカードのサブタイトルを付ける場合は div.card-body > h*.card-subtitle.text-muted
  • コンテンツにテキストを入れる場合は div.card-body > p.card-text
  • コンテンツにリンクを付ける場合は div.card-body > a.card-link

カード内にオプションのヘッダやフッタを追加。

1. div.card-header で設定

見本
カードのヘッダ
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
<div class="card">
  <div class="card-header">
    カードのヘッダ
  </div>
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

<h *> 要素に .card-header を追加して、カードヘッダのスタイルができる。

2. h*.card-header で設定

見本
カードのヘッダ
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
<div class="card">
  <h5 class="card-header">
    カードのヘッダ
  </h5>
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

3. 引用でのヘッダ v5.0.0-alpha1設定変更

見本
引用

blockquote要素に含まれるよく知られた引用。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="card">
  <div class="card-header">引用</div>
  <figure class="card-body mb-0">
    <blockquote class="blockquote">
      <p>blockquote要素に含まれるよく知られた引用。</p>
    </blockquote>
    <figcaption class="blockquote-footer mb-0">引用元-<cite title="Source Title">Source Title</cite></figcaption>
  </figure>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="card">
  <div class="card-header">
    引用
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>blockquote要素に含まれるよく知られた引用。</p>
      <footer class="blockquote-footer">引用元-<cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

4. フッタをつけて中央揃え

見本
カードのヘッダ
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
<div class="card text-center">
  <div class="card-header">
    カードのヘッダ
  </div>
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
  <div class="card-footer text-muted">
    カードのフッタ
  </div>
</div>
【設定】
  • ヘッダの場合: div.card > .card-header
    目的の外観に応じて、見出しの要素やクラス(例:<h3>, .h3)や太字の要素やクラス(例:<strong>, <b>, .fw-bold)でも使用可能。
  • フッタの場合: div.card > .card-footer.text-muted
【変更履歴】

 

カードの幅サイズ(Sizing)

カードは特定の幅がないと仮定しているので、特に明記しない限り、幅は100%になる。カスタムCSS、グリッドクラス、グリッドSass mixin、ユーティリティを使用して、必要に応じてこれを変更できる。

グリッドマークアップの使用(Using grid markup)

グリッドを使用して、必要に応じて列と行でカードを囲む。

見本
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
<div class="row">
  <div class="col-sm-6">
    <div class="card card-body">
      <h5 class="card-title">カードのタイトル</h5>
      <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card card-body">
      <h5 class="card-title">カードのタイトル</h5>
      <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
</div>
【設定】
  • div.row > div.col(-{breakpoint})-* > div.card

ユーティリティの使用(Using utilities)

使用できるサイズユーティリティを使用して、カードの幅を迅速に設定できる。

見本

●75%の幅で表示

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●50%の幅で表示

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
75%の幅で表示<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
50%の幅で表示<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>
【設定】

カスタムCSSの使用(Using custom CSS)

見本
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
設定例
<div class="card card-body" style="width: 18rem;">
  <h5 class="card-title">カードのタイトル</h5>
  <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>
【設定】
  • div.cardwidth を指定(サイズは rem 単位が望ましい)

 

テキストの配置(Text alignment)v5.0.0-beta1設定変更

文字の配置ユーティリティクラスを使用して、カード全体か特定の部分のテキスト配置が迅速に変更できる。

見本

●行頭揃えの場合(デフォルト)

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●中央揃えの場合

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●行末揃えの場合

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン
Bootstrap5.xの設定例 緑背景が変更箇所
行頭揃えの場合(デフォルト)<div class="card card-body" style="width: 18rem;">
  <h5 class="card-title">カードのタイトル</h5>
  <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>
中央揃えの場合<div class="card card-body text-center" style="width: 18rem;">
  <h5 class="card-title">カードのタイトル</h5>
  <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>
行末揃えの場合<div class="card card-body text-end" style="width: 18rem;">
  <h5 class="card-title">カードのタイトル</h5>
  <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
行末揃えの場合<div class="card card-body text-right" style="width: 18rem;">
  <h5 class="card-title">カードのタイトル</h5>
  <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>
【設定】
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 文字の行末揃え:.text(-{breakpoint})-right.text(-{breakpoint})-end

 

Bootstrapのナビゲーションコンポーネントを使用して、カードのヘッダ(またはブロック)にナビゲーションを追加。

1. タブナビゲーションの場合

見本
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

登録する
Bootstrap5.xの設定例 緑背景が変更箇所
<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="#">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">無効</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">登録する</a>
  </div>
</div>

2. ピルナビゲーションの場合

見本
カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

登録する
Bootstrap5.xの設定例 緑背景が変更箇所
<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" aria-current="true" href="#">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">無効</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
    <a href="#" class="btn btn-primary">登録する</a>
  </div>
</div>
【設定】
  • タブナビゲーションの場合:div.card > div.card-header > ul.nav.nav-tabs.card-header-tabs > li.nav-item > a.nav-link
  • ピルナビゲーションの場合:div.card > div.card-header > ul.nav.nav-pills.card-header-pills > li.nav-item > a.nav-link
    card-header-tabscard-header-pills
アクセシビリティの設定】
  • アクティブ化の場合:.active と同じ要素に aria-current="true"(支援技術に現在のアイテムであることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .active 関連のアクセシビリティの設定を追加
  • 【v5.1.1】
    • ナビリンクが無効の場合(a.nav-link.disabled):href 属性、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)、aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)の設定が不要に(v4.6.1でバックポート予定)

 

イメージ(Images)

カードには画像を扱うためのオプションがいくつかある。カードの両端に「イメージキャップ」を追加したり、イメージにカードの内容を重ねたり、イメージをカードに埋め込んだりできる。

画像の配置(Image caps)

ヘッダとフッタと同様に、カードには上部と下部に「イメージキャップ」(カードの上部や下部の画像)が表示される。

見本

●カードの上部に配置 .card-img-top

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

●カードの下部に配置 .card-img-bottom

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

プレースホルダカードの画像

●画像のみの場合 .card-img

プレースホルダカードの画像
設定例
カードの上部に配置<div class="card">
  <img class="card-img-top" src="..." alt="カードの画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
    <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
  </div>
</div>
カードの下部に配置<div class="card">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
    <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="カードの画像">
</div>
画像のみの場合<div class="card">
  <img class="card-img" src="..." alt="カードの画像">
</div>
【設定】
  • 上部に配置:img.card-img-top
  • 下部に配置:img.card-img-bottom
  • 画像のみの場合:img.card-img

画像のオーバーレイ(Image overlays)

画像をカードの背景に変え、カードのテキストを重ね合わせる。イメージによっては、追加のスタイルやユーティリティが必要な場合とそうでない場合がある。

見本
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

設定例
<div class="card bg-dark text-white">
  <img src="..." alt="カードの画像" class="card-img">
  <div class="card-img-overlay">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
    <p class="card-text"><small>最終更新3分前</small></p>
  </div>
</div>
【設定】
  • div.card > [img.card-img《画像》 + div.card-img-overlay《コンテンツ》] 

 

水平スタイル(Horizontal)v5.0.2設定変更

グリッドとユーティリティクラスの組み合わせを使用して、モバイルフレンドリーでレスポンシブな方法でカードを水平にできる。以下の例では、.g-0 でグリッドの左右のガターを取り除き、.col-md-* クラスを使って中サイズ(md)のブレークポイントでカードを水平にする。カードの内容によっては、さらに調整が必要な場合がある。

見本
プレースホルダ画像
カードのタイトル

これは、追加のコンテンツへの自然な引き込みとして、下のテキストをサポートする幅の広いカード。このコンテンツはもう少し長くなってもよい。

最終更新3分前

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." alt="..." class="img-fluid rounded-start">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">...</p>
        <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." alt="..." class="card-img">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">...</p>
        <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
      </div>
    </div>
  </div>
</div>
【設定】
  • div.card > div.row.g-0 > div.col(-{breakpoint})-*
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.2】
    • img.card-imgimg.img-fluid.rounded-start

 

カードスタイル(Card styles)

カードには、背景、罫線、色をカスタマイズするための様々なオプションがある。

カードの背景と色(Background and color)

カラーユーティリティ背景色ユーティリティを使用して、カードの外観を変更する。

背景色の種類

●Primary:.card.bg-primary.text-white

ヘッダ
Primaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Secondary:.card.bg-secondary.text-white

ヘッダ
Secondaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Success:.card.bg-success.text-white

ヘッダ
Successryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Info:.card.bg-info.text-dark

ヘッダ
Infoカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Warning:.card.bg-warning

ヘッダ
Warningカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Danger:.card.bg-danger.text-white

ヘッダ
Dangerカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Light:.card.bg-light

ヘッダ
Lightカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Dark:.card.bg-dark.text-white

ヘッダ
Darkカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

※設定なし(参考)

ヘッダ
カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Primaryヘッダ</div>
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
</div>
【設定】
  • div.card.bg-{color}(上記の「背景色の種類」から選択)を追加(その場合で白文字にするには .text-white を追加)

カードの枠線の色(Border)

境界ユーティリティを使用して、カードの枠線の色のみを変更。.text-{color} クラスは親の .card やカードの内容のサブセットに以下のように置ける。

枠線の色の種類

●Primary:.card.border-primary > .card-body.text-primary

ヘッダ
Primaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Secondary:.card.border-secondary > .card-body.text-secondary

ヘッダ
Secondaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Success:.card.border-success > .card-body.text-success

ヘッダ
Successryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Info:.card.border-info > .card-body.text-info

ヘッダ
Infoカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Warning:.card.border-warning > .card-body.text-warning

ヘッダ
Warningカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Danger:.card.border-danger > .card-body.text-danger

ヘッダ
Dangerカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Light:.card.border-light > .card-body.text-light

ヘッダ
Lightカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Dark:.card.border-dark > .card-body.text-dark

ヘッダ
Darkカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">ヘッダ</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primaryカードタイトル</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
</div>
【設定】
  • div.card.border-{themecolor}(上記の「枠線の色の種類」から選択)を追加

mixinユーティリティ(Mixins utilities)

また、必要に応じてカードのヘッダとフッタの枠線を変更し、背景色を .bg-transparent で削除することもできる。

見本
ヘッダ
Successカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

※ヘッダとフッタに .bg-transparent を入れない場合(参考)

ヘッダ
Successカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●裏技1:背景と枠で色を変える:.border-{themecolor}.bg-{color}

ヘッダ
カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●裏技2:ヘッダとフッタのみ背景色

ヘッダ
カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">ヘッダ</div>
  <div class="card-body text-success">
    <h5 class="card-title">Successカードタイトル</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
  <div class="card-footer bg-transparent border-success">フッタ</div>
</div>
※裏技1:背景と枠で色を変える<div class="card border-danger text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header border-danger">ヘッダ</div>
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
  <div class="card-footer border-danger">フッタ</div>
</div>
※裏技2:ヘッダとフッタのみ背景色<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header text-white bg-primary border-primary">ヘッダ</div>
  <div class="card-body text-primary">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
  </div>
  <div class="card-footer text-white bg-primary border-primary">フッタ</div>
</div>
【設定】
  • ヘッダやフッタにも枠線の色を設定する場合は、div.card.border-{themecolor} を追加して(.card-body.border-{themecolor} を追加しても無効)、.card-header.card-footer.bg-{color} を追加
  • ヘッダやフッタのデフォルトの背景色を消したい場合は、.card-header.card-footer.bg-transparent を追加
  • ヘッダやフッタのみ背景色を設定する場合は、.card-header.card-footer.bg-{color} を追加

 

カードレイアウト(Card layout)

Bootstrapには、カード内のコンテンツのスタイルに加えて、一連のカードをレイアウトするためのオプションがいくつか組み込まれている。当分の間、これらのレイアウトオプションはまだレスポンシブには対応せず。

カードグループ(Card groups)

カードグループを使用して、等しい幅と高さの列を持つ単一の添付要素としてカードをレンダリング。カードグループは極小のビューポートでは縦に積み重ねられた状態で表示されるが、sm(小)ブレークポイントからは display: fixed を使用して均一なサイズで結合される。

見本
プレースホルダカード1の画像
カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

プレースホルダカード2の画像
カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

最終更新3分前

プレースホルダカード3の画像
カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。

最終更新3分前

設定例
<div class="card-group">
  <div class="card">
    <img src="..." alt="カード1の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード1のタイトル</h5>
      <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." alt="カード2の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード2のタイトル</h5>
      <p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
      <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." alt="カード3の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード3のタイトル</h5>
      <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
      <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
    </div>
  </div>
</div>

カードグループでフッタを使用すると、その内容が自動的に整列。

見本
プレースホルダカード1の画像
カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカード2の画像
カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

プレースホルダカード3の画像
カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。

設定例
<div class="card-group">
  <div class="card">
    <img src="..." alt="カード1の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード1のタイトル</h5>
      <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">最終更新3分前</small>
    </div>
  </div>
  <div class="card">
    <img src="..." alt="カード2の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード2のタイトル</h5>
      <p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">最終更新3分前</small>
    </div>
  </div>
  <div class="card">
    <img src="..." alt="カード3の画像" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カード3のタイトル</h5>
      <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">最終更新3分前</small>
    </div>
  </div>
</div>
【設定】
  • div.card-group > [div.card] + [div.card]...
【注意】
  • 小のビューポート以上で適用

グリッドカード(Grid cards)v5.0.0-alpha1設定変更

Bootstrapグリッドシステムと.rol-cols クラスを使用して、1行に表示する(カードを囲む)グリッド列の数を制御。例えば、ここでは、.row-cols-1 で1列に1カードをレイアウトし、中のビューポートのブレークポイントからは .row-cols-md-2 で4つのカードを複数の行にわたって等幅に分割。

見本
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
</div>

.row-cols-2.row-cols-3 に変更すると、4枚目のカードが折り返される。

見本
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      ...
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
</div>

高さを揃えたいときは、カードに .h-100 を追加する。デフォルトでは同じ高さにしたい場合は、scss/_variables.scss$card-height: 100% に設定すること。

見本
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カードのタイトル

これは短いカードです。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。

プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは短いカードです。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="..." class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
</div>

カードグループと同様に、カードフッタも自動的に整列(v4のカードカラムの設定変更)。

見本
プレースホルダカードの画像
カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

プレースホルダカードの画像
カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="カード1の画像" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カード1のタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">最終更新3分前</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="カード2の画像" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カード2のタイトル</h5>
        <p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">最終更新3分前</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." alt="カード3の画像" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カード3のタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">最終更新3分前</small>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="card-deck">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...;
  </div>
  <div class="card">
    ...
  </div>
</div>
【設定】
  • div.row.row-cols(-{breakpoint})-*.g(-{breakpoint})-* > [div.col > div.card] + [div.col > div.card]...
  • 各カードの高さを揃えたい場合は、div.card.h-100 を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.row.row-cols(-{breakpoint})-* > [div.col > div.card] + [div.col.mb-* > div.card]... ⇒ div.row.row-cols(-{breakpoint})-*.g-*> [div.col > div.card] + [div.col > div.card]...
    • v4のカードデッキ:div.card-deck > [div.card] + [div.card]... ⇒ div.row.row-cols(-{breakpoint})-*.g-* > [div.col > div.card.h-100] + [div.col > div.card.h-100 ]...(.card-deck は廃止)

Masonryレイアウト v5.0.0-beta1設定変更

v4 では、Masonryのようなカードレイアウトを実現するためにCSSのみで設定する手法(v4のカードカラム)を使用していたが、この手法には多くの不具合が生じた。v5 でこのタイプのレイアウトを構築したいなら、Masonryプラグインを利用すれば作成できる。MasonryはBootstrapに組み込まれていないが、参考のため実例にデモを掲載。

Bootstrap5.xの設定例 緑背景が変更箇所
JavaScriptファイル<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
HTML<div class="row g-4" data-masonry='{"percentPosition": true }'>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <img src="..." alt="カード1の画像" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">新しい行に折り返すカード1のタイトル</h5>
        <p class="card-text">これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。このコンテンツはもう少し長くなっています。</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card p-3">
      <figure class="p-3 mb-0">
        <blockquote class="blockquote">
          <p>カード2:この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer mb-0">
          引用元- <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <img src="..." alt="カード3の画像" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">カード3のタイトル</h5>
        <p class="card-text">このカードには、追加のコンテンツへの自然な導入として下にサポートテキストを入れています。</p>
        <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card bg-primary text-white text-center p-3">
      <figure class="mb-0">
        <blockquote class="blockquote">
          <p>カード4:この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer mb-0 text-white">
          引用元- <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">カード5のタイトル</h5>
        <p class="card-text">このカードには、通常のタイトルとその下にテキストの短い段落を入れています。</p>
        <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <img src="..." alt="カード6の画像" class="card-img">
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card p-3 text-end">
      <figure class="mb-0">
        <blockquote class="blockquote">
          <p>カード7:この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          引用元- <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">カード8のタイトル</h5>
        <p class="card-text">これはタイトルとその下にサポートテキストを持つもう一つのカード。このカードには、全体的にわずかに背を高くするための追加コンテンツを入れています。</p>
        <p class="card-text"><small class="text-muted">最終更新3分前</small></p>
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
HTML<div class="card-columns">
  <div class="card">
    カード1の設定...
  </div>
  <div class="card p-3">
    カード2の設定...
  </div>
  <div class="card">
    カード3の設定...
  </div>
  <div class="card text-white card-primary text-center p-3">
    カード4の設定...
  </div>
  <div class="card text-center">
    カード5の設定...
  </div>
  <div class="card">
    カード6の設定...
  </div>
  <div class="card text-right p-3">
    カード7の設定...
  </div>
  <div class="card">
    カード8の設定...
  </div>
</div>
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.card-columns > [div.card] + [div.card] ... ⇒ div.row.g-*[data-masonry='{"percentPosition": true }'] > [div.col-* > div.card] + [div.col-* > div.card] ...(.card-columns は廃止)
    • 別途MasonryのJSプラグインを読み込ませる必要あり(data-masonry='{"percentPosition": true }' はMasonryの各アイテム幅をパーセント値にする設定)
  • 【v5.0.0-beta1】
    • MasonryのCDNの提供元:Cloudflare⇒jsDelivr(BootstrapのCDNに合わせた)

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 card-variables の設定$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer / 2;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y / 2;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width / 2;