Bootstrap4 の使い方(4) Components (2)

Bootstrap のドキュメントを元にしたコンポーネントについての解説やサンプルです。

この他に以下のページもあるのでよろしければご覧ください。

  1. Layout(Bootstrap の読み込み、グリッドシステム、メディアオブジェクト)
  2. Content(タイポグラフィ、コード、イメージ、フィギュア、テーブル)
  3. Components part1(アラート、バッジ、パンくずリスト、ボタン、ドロップダウン、フォーム、インプットグループ、リストグループ、 ページネーション)
  4. Components part2(このページ。カード、表示・非表示切り替え、アコーディオン、ツールチップ、ポップオーバー、モーダル、ナビゲーション、ナビゲーションバー)
  5. Components part3(カルーセル、スクロールスパイ)
  6. Utilities

以下で説明している Bootstrap のバージョンは、4.1.3 です。

作成日:2018年12月27日

カード(Cards)

カード(Cards)はコンテンツを表示するための柔軟で拡張可能なコンテナのコンポーネントで、多数のオプションが用意されています。Bootstrap3 での パネル、囲み枠、サムネイル のコンポーネントは、Bootstrap4 ではカードに統合されています。

カードは Flexbox で構築されているため、簡単に配置したり他のコンポーネントと組み合わせることができます。但し、デフォルトではマージンは設定されていないので spacing utilities などを必要に応じて使用します。

以下はデフォルトで設定されている card クラスのスタイルです。

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

以下は、複数の要素からなる基本的なカードの例です。カードには幅の指定がないので、親要素の幅まで広がります。必要に応じてサイズを指定します。以下の例では固定幅で表示するように、インラインで幅(width: 18rem;)を指定しています。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../286x180.png" alt="Card image cap">
  <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>
286x180 image sample
Card title

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

Go somewhere

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

カードは、画像、テキスト、リストグループ、リンクなどの多様なコンテンツをサポートしています。以下は代表的なコンテンツのタイプです。(Content types

カードボディ(Body)

カードを構成する領域の1つであるボディブロック(カードボディ)は card-body クラスを指定します。カード内にパディングの付いたセクション(領域)が必要な場合などに指定します(複数配置可能)。card-body クラスには、デフォルトで以下が設定されています。

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

以下はカードボディを使った簡単なカードの例です。

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

以下はカードとードボディのクラスを同時に指定したカード(カードボディ1つのみのカード)の例です。

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

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

カードのタイトルは、h 要素に card-title クラスを指定します。サブタイトルは、同様に h 要素に card-subtitle クラスを指定します。 カードボディ内のタイトルとサブタイトルはうまく配置されるようになっています。以下が設定されているので、必要に応じて spacing utilities などを使って配置を調整します。

.card-title {
  margin-bottom: 0.75rem;
}
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

リンクは、card-link クラスを指定すると複数ある場合は、右横に適切な間隔を取るようになっています。

.card-link + .card-link {
  margin-left: 1.25rem;
}

テキストは、card-text クラスを指定すると、以下が適用されます。

.card-text:last-child {
  margin-bottom: 0;
}

以下はカードボディ内に、タイトル、テキスト、リンクを使った例です。

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

画像

カードの先頭に画像を表示する場合は、card-img-top クラスを指定します。画像を一番下に表示する場合は、card-img-bottom クラスを指定します。

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

テキストはカードボディ内に card-text クラスを指定して配置します。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../286x180.png" alt="Card image cap">
  <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>
286x180 image sample

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

リストグループ

リストグループのカードを作成するには、枠なしのリストグループ(flush list group)を使用します。

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

以下はリストグループとカードヘッダーを配置した例です。

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

複数コンテンツの組み合わせ

カードには色々なコンテンツを配置することができます。以下は、画像、ブロック、テキスト、リストグループを固定幅のカードに配置した例です。(Kitchen sink

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../286x180.png" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
286x180 image sample
Card title

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

div 要素や h 要素を使ってヘッダやフッタを配置することができます。それぞれ、card-header または card-footer クラスを指定します。ヘッダとフッタには薄い背景色が付きます。

以下は 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>
Featured
Special title treatment

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

Go somewhere

以下は h 要素を使ったヘッダの例です。

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Featured
Special title treatment

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

Go somewhere

以下はヘッダとブロッククォートを配置したカードの例です。

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

以下は、ヘッダとフッタを配置した例です。

<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>
Featured
Special title treatment

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

Go somewhere

サイズ調整

カードは特定の幅を想定していないので、指定しない限り幅は 100% になり、親要素いっぱいまで広がります。独自の CSS やグリッドシステムのクラス、ユーティリティのクラスを使って幅を指定することができます。(Sizing

グリッドシステムを利用

グリッドシステムを使ってサイズを調整するには、行(class="row")とカラム(class="col-*")を配置しカラム内にカードを配置します。

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

ユーティリティを利用

サイズのユーティリティを使ってサイズを調整することもできます。

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

独自の 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>
Special title treatment

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

Go somewhere

テキストの行揃え

テキストユーティリティのクラスを使って、カード全体や一部のテキストの右寄せ(.text-right)や中央寄せ(.text-center)などが可能です。(Text alignment

<div class="card" style="width: 22rem;">
  <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: 22rem;">
  <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: 22rem;">
  <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
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

ナビゲーションの追加

カードのヘッダやブロックに Navs コンポーネントを使ってナビゲーションを追加することができます。

以下は、ナビゲーションに card-header-tabs クラスを指定した例です。

<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" href="#">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

以下は、ナビゲーションに card-header-pills クラスを指定した例です。

<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" href="#">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

画像

カードに画像とキャプションを配置する場合、キャプションを画像の上または下に配置する方法や画像にキャプションを重ねて表示する方法があります。画像は配置する位置に応じて card-img-top または card-img-bottom クラスを指定します。画像のみを配置する場合は、画像に card-img クラスを指定します。

<div class="card mb-3">
  <img class="card-img-top" src=".../852x180.png" alt="Card image cap">
  <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 class="card-img-bottom" src=".../852x180.png" alt="Card image cap">
</div>
Card image 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

Card image cap

以下は、画像のみをカードで表示する例です。画像に card-img クラスを指定すると四隅全てが角丸になります。

<div class="card">
  <img class="card-img" src="../852x270.png" alt="Card image">
</div>
Card image

オーバーレイ

画像にキャプションを重ねて表示する場合は、画像に card-img クラスを指定して、キャプション部分に card-img-overlay クラスを指定します。画像の種類(内容)などによっては追加のスタイルの指定が必要になるかも知れません。

以下の例では、背景色(.bg-dark)と文字色(.text-white)のクラスを指定しています。

<div class="card bg-dark text-white">
  <img class="card-img" src=".../852x270.png" alt="Card image">
  <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>
Card 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

背景色などのスタイル

ユーティリティクラスを使ってカードの背景色や枠線、文字色を設定することができます。

以下はカラーユーティリティを使って背景色や文字色を設定する例です。

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

枠線の色の指定

ボーダーユーティリティのコンテクスチュアルカラーのクラスを使うと、カードの枠線の色を変更することができます。また、カラーユーティリティの text-{color} クラスを card クラスを指定した親要素に指定すれば、以下の例のようにカード全体の文字色を変更することもできます。

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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.

ヘッダやフッタのスタイル

ヘッダやフッタの枠線は card-header クラスを指定した要素にボーダーユーティリティのクラスを指定して変更することができます。ヘッダやフッタの背景色を削除するには bg-transparent クラスを指定します。

<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>
Header
Success card title

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

カードのレイアウト

カード用のレイアウトのオプションもありますが、現時点(バージョン4.1.3)ではこれらのレイアウトはレスポンシブ対応にはなっていません。(Card layout

カードグループ

カードグループ(card-group クラス)を使うとそれぞれのカードの幅と高さを等しくして1つのまとまりとして表示します。例えばカードグループ内にカードを4つ配置すると、一行に4列のカードが1つのまとまりとして表示されます。カードグループはサイズを均一にするために display: flex; を使っています。(Card groups

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>
Card image 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 image cap
Card title

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

Last updated 3 mins ago

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

それぞれのカードにフッタを指定すると、フッタの位置は自動的に調整されます。

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>
Card image 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.

Card image cap
Card title

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

Card image 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.

カードデッキ

隣接したカードに間隔を置いて配置する場合はカードデッキ(card-deck クラス)を使用します。(Card decks

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
Card image 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.

Last updated 3 mins ago

Card image cap
Card title

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

Last updated 3 mins ago

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

カードクラス同様、それぞれのカードにフッタを指定すると、フッタの位置は自動的に調整されます。

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>
Card image 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.

Card image cap
Card title

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

Card image 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.

カードカラム

カードを Masonry のように表示するには、card-columns クラスを使用します。この場合カードは、Flexbox ではなく、CSS column プロパティで構築されます。また、カードは、上から下、左から右の順に並べられます。(Card columns

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
Card image cap
Card title that wraps to a new line

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

カードカラムは、追加の記述でカスタマイズ(拡張)することができます。以下は、既存のクラス .card-columns を拡張して画面幅がラージサイズの場合は4列に、エクストララージサイズの場合は5列にカラム数を変更してレスポンシブにする例です。

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

表示・非表示切り替え(Collapse)

Collapse は JavaScript を使ってコンテンツの表示・非表示を切り替えるコンポーネントです。

ボタンやリンクを使って特定のコンテンツ(要素)を表示したり非表示にします。非表示にする際は、アニメーションを使ってそのコンテンツの高さを 0 にします。collapse クラスを指定した要素にはパディングは指定できないので、必要に応じて内側に div 要素などを配置し、その要素にパディングを指定します。

サンプル

以下のいずれかのボタン(どちらも同じ機能)をクリックすると、クラスの変更(切り替え)により他の要素が表示されたり非表示になります。

  • .collapse :コンテンツを非表示にするクラス
  • .collapsing :切り替わる際に適用されるクラス
  • .collapse.show :コンテンツを表示にするクラス

表示を切り替えるボタンには、a 要素か button 要素を使用することができます。どちらを使用する場合でも、data-toggle="collapse" を指定する必要があります。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
表示・非表示を切り替えるボタン
  • a 要素か button 要素を使用し、data-toggle="collapse" を指定
  • a 要素の場合、href 属性にコンテンツの要素の id を指定し、role="button" を指定
  • button 要素の場合、data-target 属性にコンテンツの要素の id を指定
コンテンツ
  • collapse クラスを指定(最初から表示しておく場合は、show クラスも同時に指定)
  • id 属性を指定(ボタンのターゲット)
  • パディングが必要な場合は、内側に div 要素などを配置し、その要素にパディングを指定(カードを使うなど)
アクセシビリティ
  • role="button" :ボタンが button 要素以外(a 要素など)の場合にその役割(button であること)を伝えます
  • aria-expanded="false":要素の開閉の状態を伝えます(show クラスを指定して表示状態にしている場合は、aria-expanded="true")
  • aria-controls="コンテンツの id":ボタンとコンテンツの関連付けを伝えます

ターゲット(表示・非表示する要素)が複数ある場合

button 要素、または a 要素のボタンの href または data-target 属性に、それぞれが参照する要素の id や class の値を指定すれば、複数のターゲットを表示・非表示にすることができます。

以下の例では、3つ目のボタンで2つの要素の表示を同時に切り替えるため、両方の要素に multi-collapse と言うクラスを指定してボタンから参照しています(指定するクラス名は任意の名前を指定できます)。

<p> 
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> 
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</a> 
  <a class="btn btn-primary" data-toggle="collapse" href=".multi-collapse" role="button" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</a> 
</p>
<div class="collapse multi-collapse" id="multiCollapseExample1">
  <div class="card card-body mb-3">
    (First Element) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
  </div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample2">
  <div class="card card-body"> 
    (Second Element)  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
  </div>

(First Element) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
(Second Element) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

アコーディオン(Accordion)

Collapseカードと組み合わせるとアコーディオンのように開閉するパネルを作成することができます。(Accordion

  • 全体を accordion クラスと role="tablist"、id を指定した div 要素で囲みます。 id の値は各パネルの data-parent 属性で参照する際に使用します。
  • 各パネルはカードを使って記述し、開閉のボタンはカードのヘッダ内に記述します。
  • ボタンは button 要素または a 要素で記述し、data-toggle="collapse" を追加して、data-target 属性(a 要素の場合は href 属性)でターゲットのパネルを参照します
  • 以下の例では、button 要素にボタンコンポーネントの btn と btn-link クラスを指定していますが、btn-block などを指定することもできます。
  • パネルが非表示状態になっているボタンには、collapsed クラスを追加します。
  • パネルには collapse クラスを指定し、予め表示しておくパネルには、collapse と show クラスの両方を指定します。
  • data-parent 属性を指定すると、他のパネルを開くと開いていたパネルを閉じるようになります(指定しなければ、個々のパネルが開閉します)。
<div class="accordion" id="accordionExample" role="tablist">
        
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. ・・・中略・・・heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. ・・・中略・・・ heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. ・・・中略・・・ heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  
</div>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

以下は、ボタンに class="btn btn-block bg-transparent text-left" を指定し、CSS で .btn:focus のボックスシャドウを削除してスタイルを変更した例です。また、Font Awesome のアイコンを使って状態を表示しています。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordionExample2" role="tablist">
  <div class="card">
    <div class="card-header" id="headingOne2">
      <h5 class="mb-0">
        <button class="btn btn-block bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2" data-parent="#accordionExample2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid・・・中略・・・heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
        
  <div class="card">
    <div class="card-header" id="headingTwo2">
      <h5 class="mb-0">
        <button class="btn btn-block bg-transparent text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2" data-parent="#accordionExample2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid・・・中略・・・heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingThree2">
      <h5 class="mb-0">
        <button class="btn btn-block bg-transparent text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree2" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid・・・中略・・・heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

以下は、追加で指定した CSS です。アイコンの追加は擬似要素を使って、button 要素の collapsed クラスを利用しています。(関連ページ:Font Awesome 5 を疑似要素で使う

#accordionExample2 .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 transparent;
}
 
/* Font Awesome 5 を使う場合 */
#accordionExample2 .card-header button[data-toggle="collapse"].collapsed::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f103";/* angle-double-down */
  float: right;
}
#accordionExample2 .card-header button[data-toggle="collapse"]::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f102";/* angle-double-up */
  float: right;
}

/* Font Awesome 4 を使う場合 */
#accordionExample2 .card-header button[data-toggle="collapse"].collapsed::after {
  font-family: 'FontAwesome';
  content: "\f103";/* angle-double-down */
  float: right;
}
#accordionExample2 .card-header button[data-toggle="collapse"]::after {
  font-family: 'FontAwesome';
  content: "\f102";/* angle-double-up */
  float: right;
}

イベント

Collapse のイベントは、collapse クラスを指定した要素において発火されます。以下のイベントが定義されています。

イベントタイプ 説明
show.bs.collapse このイベントは、show インスタンスメソッドが呼ばれた直後に発火します。
shown.bs.collapse このイベントは、collapse 要素(非表示になっている要素)が表示されると発火します(CSS トランジションが完了するまで待ちます)。
hide.bs.collapse このイベントは、 hide インスタンスメソッドが呼び出た直後に発火します。
hidden.bs.collapse このイベントは、collapse 要素(表示されている要素)が非表示になる(隠される)と発火します(CSS トランジションが完了するまで待ちます)。

以下のような使い方をします。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // 要素が隠された(非表示になった)際の処理
})

以下は、非表示・表示を切り替えると、ボタンの文字を変更する例です。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample">表示する</a>
</p>
<div class="collapse" id="collapseExample3">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high.....
  </div>
</div>
$('#collapseExample3').on('show.bs.collapse', function () {
  $('[href="#collapseExample3"]').text("隠す");
})
$('#collapseExample3').on('hide.bs.collapse', function () {
  $('[href="#collapseExample3"]').text("表示する");
})

上記のような動作であれば、JavaScritp を使わなくても、CSS の擬似要素だけで実装することができますが、擬似要素は HTML として認識されないため、この例の場合はアクセシビリティに関して問題がある可能性があるので、あくまで参考まで。

<div id="collapse_sample">
  <p> <a class="btn btn-primary noicon" data-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample"></a> </p>
  <div class="collapse" id="collapseExample4">
    <div class="card card-body"> 
      Anim pariatur cliche reprehenderit, enim eiusmod high.... 
    </div>
  </div>
</div>
#collapse_sample a[aria-expanded="false"]::after {
  content: "Show";
}
#collapse_sample a[aria-expanded="true"]::after {
  content: "Hide";
}

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

ツールチップ(Tooltips)

ツールチップはマウスオーバー時に説明文などを表示する機能です。(Tooltips

この機能はサードパーティのライブラリ Popper.js を利用しているため、popper.min.js を Bootstrap の JavaScript の前に読み込むか、Popper.js を含む bootstrap.bundle.min.js(または bootstrap.bundle.js)を読み込む必要があります。Bootstrap の JavaScript をソースからビルドしている場合は、util.js が必要になります。

また、この機能はデフォルトでは有効になっていないので JavaScript を使って自分で初期化の記述をする必要があります。その他、以下のような制約があります。

  • title 属性の値の長さが 0(空)の場合は、表示されません。(title 属性を空にしても、data-original-title 属性に値を指定すれば表示されるようです)
  • インプットグループやボタングループなどの複雑なコンポーネントでは、オプションで container: 'body' を指定することによりレンダリングの問題を回避できます。
  • 非表示の要素をトリガーとしたツールチップは機能しません。
  • disabled クラスを指定したり disabled 属性を指定した要素は、ラッパー要素(その要素を囲む要素)から起動するようにする必要があります。
  • 複数行にまたがるハイパーリンクに対しては、ツールチップは中央に表示されます。これを回避するには、white-space: nowrap; を a 要素に指定します。
  • ツールチップは、対応する要素が DOM から削除される前に非表示にする必要があります。

初期化の記述

以下を JavaScript に記述すると、data-toggle="tooltip" を指定した要素でツールチップを有効にすることができます。

 $(function () {
  $('[data-toggle="tooltip"]').tooltip();
})

ツールチップに表示する内容は、title 属性に記述します。

これは <a href="#" data-toggle="tooltip" title="この内容が表示されます">サンプル</a>です。

これは サンプルです。

以下は、button 要素を使ったサンプルです。data-placement 属性を使ってツールチップを表示する位置のオプション(デフォルトは top)を指定しています。

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

以下は、data-html="true" オプションを指定して表示する内容を HTML を使って指定する例です。
※XSS 攻撃(クロスサイトスクリプティング)が心配な場合は、このオプションを使用しないことが推奨されています。

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

任意のクラスで初期化

任意のクラスを指定した要素でツールチップを表示させることもできます。その場合、そのクラスを使ってツールチップの機能を有効にします。

例えば、ttps というクラスを指定した要素でツールチップを表示させるには以下のようにします。以下の JavaScript (jQuery) は、クラス属性の値が "ttps" の要素で tooltip() を実行するというような意味になります。

但し、tooltip と言うクラス名は既に Bootstrap で使用されているため、それ以外のクラス名を指定する必要があります。

$('.ttps').tooltip();

この場合、data-toggle="tooltip" を指定する必要はありません。

<p>これは ttps クラスで<a href="#" class="ttps" title="クラスで表示">ツールチップ</a>を表示する例です。</p>

これは ttps クラスでツールチップを表示する例です。

表示されるツールチップのマークアップ

ツールチップのプラグインによりツールチップを表示する際は、以下のようなマークアップが生成されます。(必要であれば、template オプションで変更することも可能です)

<!-- ツールチップを表示するマークアップ -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- ツールチップ表示の際にプラグインにより生成されるマークアップ -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

無効な要素での表示

disabled クラスを指定したり disabled 属性を指定した要素に対しては、ホバーやフォーカスなどでツールチップを起動することができません。無効な要素にツールチップを表示するには、div 要素や span 要素で無効な要素をラップして(囲んで)ツールチップを設定します。その際に、tabindex="0" を指定してキーボードでフォーカスできるようにし、そして無効な要素のポインターイベントを上書きすることが望ましいとされています。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

オプション

オプションは data 属性または JavaScript を使って指定することができます。(Options

data 属性を使って指定する場合は、例えば、placement のオプションなら data-placement="auto(オプションの値)" のように指定します。

<a href="#" data-toggle="tooltip" data-placement="auto" title="ツールチップ">tooltips</a>

JavaScript の場合は、以下のように指定することができます。

$('#example').tooltip({ placement: 'auto' });
オプション名 タイプ デフォルト値 説明
animation boolean true ツールチップに CSS フェードのトランジションアニメーションを適用するかどうか
container string | element | false false ツールチップを特定の要素に対して付加するかどうか。(例)container: 'body' この指定は、ウィンドウのリサイズの際にツールチップが起動した要素から離れてしまうのを防ぐのに有効です。
delay number | object 0 ツールチップの表示・非表示にかかる時間をミリ秒で指定。但し trigger オプションを manual に指定している場合は適用されません。number(数値)で指定した場合は、表示・非表示の両方に適用され、Object で指定する場合は、delay: { "show": 500, "hide": 100 } のように指定できます。
html boolean false ツールチップ表示に HTML の使用を許可するかどうか。false の場合は、jQuery の text() メソッドを使用。※XSS 攻撃(クロスサイトスクリプティング)が心配な場合は、このオプションを使用しない(true にしない)ことが推奨されています。
placement string | function 'top' ツールチップの位置を指定。指定できる値は、 auto、top、bottom、left、right。auto を指定すると動的に位置が変更されます。関数(function)が使用される場合は、第一引数にツールチップの DOM ノードを、第二引数にツールチップを起動する DOM ノードを受け取ります。this のコンテクストはツールチップのインスタンスになります。
selector string | false false セレクタが提供されれば、ツールチップのオブジェクトは指定されたターゲットに付与(delegated to)されます。実際には、popovers を追加した場合に使用されます。(参考サイト
template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' ツールチップのベースとなる HTML マークアップ。ツールチップのタイトルは、.tooltip-inner 内に挿入され、.arrow は矢印。最も外側の要素は .tooltip クラスと role="tooltip" が指定されている必要があります。
title string | element | function '' title 属性がない場合の、デフォルトの title の値。
trigger string 'hover focus' どのようにツールチップを起動するか。指定できる値は、click、hover、focus、manual。複数の値をスペース区切りで指定可能。manual を指定した場合は、.tooltip('show'),.tooltip('hide'),.tooltip('toggle') により起動され、他のオプションと同時に指定することはできません。hover だけを単独で指定すると、キーボードからの操作で起動できないので、キーボードのみのユーザーに他の手段でツールチップの内容を伝える必要があります。
offset number | string 0 ツールチップのターゲットからのオフセット。詳細は Popper.js ドキュメントを参照。
fallbackPlacement string | array 'flip' Popper.js がフォールバックの際に取り得る位置。詳細は Popper.js ドキュメントを参照。
boundary string | element 'scrollParent' ツールチップのオーバーフロー制約の境界の指定。'viewport', 'window', 'scrollParent' または HTML 要素 (JavaScript only)。詳細は Popper.js ドキュメントを参照。

ポップオーバー(Popovers)

ツールチップと似たような機能としてポップオーバーという機能も用意されています。ポップオーバーはクリックすると表示され、説明文が見出しと本文からなる形式になっています。(Popovers

この機能はサードパーティのライブラリ Popper.js を利用しているため、popper.min.js を Bootstrap の JavaScript の前に読み込むか、Popper.js を含む bootstrap.bundle.min.js(または bootstrap.bundle.js)を読み込む必要があります。Bootstrap の JavaScript をソースからビルドしている場合は、util.js が必要になります。

また、この機能はデフォルトでは有効になっていないので JavaScript を使って自分で初期化の記述をする必要があります。その他、以下のような制約があります。

  • ポップオーバーは依存関係としてツールチップのプラグインが必要です。
  • title 属性と data-content 属性の値の両方の長さが 0(空)の場合は、表示されません。
  • インプットグループやボタングループなどの複雑なコンポーネントでは、オプションで container: 'body' を指定することによりレンダリングの問題を回避できます。
  • 非表示の要素をトリガーとしたポップオーバーは機能しません。
  • disabled クラスを指定したり disabled 属性を指定した要素は、ラッパー要素(その要素を囲む要素)から起動するようにする必要があります。
  • 複数行にまたがるハイパーリンクに対しては、ポップオーバーは中央に表示されます。これを回避するには、white-space: nowrap; を a 要素に指定します。
  • ポップオーバーは、対応する要素が DOM から削除される前に非表示にする必要があります。

初期化の記述

以下を JavaScript に記述すると、data-toggle="popover" を指定した要素でポップオーバーを有効にすることができます。

$(function () {
  $('[data-toggle="popover"]').popover()
})

ポップオーバーを使用するには、要素に data-toggle="popover" 属性を指定し、title 属性にポップオーバーで表示するタイトルを、data-content 属性にポップオーバーの本文(内容)を指定ます(title 属性を指定しない場合は、本文のみが表示されます)。

<a href="#" data-toggle="popover" data-content="コンテンツ(内容)" title="タイトル" >ポップオーバーを表示</a>

ポップオーバーを表示

任意のクラスを指定した要素でポップオーバーを表示させることもできます。その場合、そのクラスを使ってポップオーバーの機能を有効にします。

例えば、ppovr というクラス(popover と言うクラス名は使用できません)を指定した要素でポップオーバーを表示させるには以下のようにします。以下の JavaScript (jQuery) は、クラス属性の値が "ppovr" の要素で popover() を実行するというような意味になります。

$(function () {
  $('.ppovr').popover();
})
<a href="#" data-content="コンテンツ(内容)" title="タイトル" class="ppovr">ポップオーバーを表示</a>

ポップオーバーを表示

container オプション

親要素に何らかのスタイルを適用しているために、ポップオーバーの表示に影響がある場合は、container オプション(container:'body')を指定してポップオーバーの HTML がその要素内に表示することができます。以下は JavaScript を使った指定の例です。

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

data 属性を使って container オプションを指定する場合は、data-container="body" とします。

<a href="#" data-toggle="popover" data-container="body" data-content="コンテンツ(内容)" title="タイトル" >ポップオーバーを表示</a>

ポップオーバーを表示

表示する位置

表示する位置は top, right, bottom, と left を指定することができます。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

閉じ方のオプション

ポップオーバーは、ポップオーバーを表示する要素を再度クリックすることで閉じるようになっていますが、その要素以外の他の部分(要素)をクリックして閉じることができるようにするには、trigger オプション(data-trigger="focus")を指定します。

但し、この方法を全てのブラウザで正しく実行するには、button 要素ではなく a 要素を使い、tabindex 属性(tabindex="0")も合わせて指定することが推奨されています。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content...">Dismissible popover</a>
Dismissible popover

以下は、JavaScript を使ってオプションを指定する例です。

$('.popover-dismiss').popover({
  trigger: 'focus'
})

無効な要素での表示

disabled クラスを指定したり disabled 属性を指定した要素に対しては、ホバーやフォーカスなどでポップオーバーを起動することができません。無効な要素にポップオーバーを表示するには、div 要素や span 要素で無効な要素をラップして(囲んで)ポップオーバーを設定します。その際に、無効な要素のポインターイベントを上書き(style="pointer-events: none;")することが望ましいとされています。

また、無効になっている要素をクリックすることはあまりないので、data-trigger="hover" のオプションを指定して、ポップオーバーの起動をホバー時に行うようにすると良いかもしれません。

<span class="d-inline-block" data-toggle="popover" data-trigger="hover" title="Hover Opt" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

オプション

オプションは data 属性または JavaScript を使って指定することができます。(Options

data 属性を使って指定する場合は、例えば、trigger のオプションなら data-trigger="hover(オプションの値)" のように指定します。

JavaScript の場合は、以下のように指定することができます。

$('#example').popover({ placement: 'auto' });
オプション名 タイプ デフォルト値 説明
animation boolean true ポップオーバーに CSS フェードのトランジションアニメーションを適用するかどうか
container string | element | false false ポップオーバーを特定の要素に対して付加するかどうか。(例)container: 'body' この指定は、ウィンドウのリサイズの際にポップオーバーが起動した要素から離れてしまうのを防ぐのに有効です。
delay number | object 0 ポップオーバーの表示・非表示にかかる時間をミリ秒で指定。但し trigger オプションを manual に指定している場合は適用されません。number(数値)で指定した場合は、表示・非表示の両方に適用され、Object で指定する場合は、delay: { "show": 500, "hide": 100 } のように指定できます。
html boolean false ポップオーバー表示に HTML の使用を許可するかどうか。false の場合は、jQuery の text() メソッドを使用。※XSS 攻撃(クロスサイトスクリプティング)が心配な場合は、このオプションを使用しない(true にしない)ことが推奨されています。
placement string | function 'right' ポップオーバーの位置を指定。指定できる値は、 auto、top、bottom、left、right。auto を指定すると動的に位置が変更されます。関数(function)が使用される場合は、第一引数にポップオーバーの DOM ノードを、第二引数にポップオーバーを起動する DOM ノードを受け取ります。this のコンテクストはポップオーバーのインスタンスになります。
selector string | false false セレクタが提供されれば、ポップオーバーのオブジェクトは指定されたターゲットに付与(delegated to)されます。(参考サイト
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' ポップオーバーのベースとなる HTML マークアップ。ポップオーバーのタイトルは、.popover-header 内に、コンテンツは popover-body 内に挿入され .arrow は矢印。最も外側の要素は .popover クラスが指定されている必要があります。
title string | element | function '' title 属性がない場合の、デフォルトの title の値。
trigger string 'click' どのようにポップオーバーを起動するか。指定できる値は、click、hover、focus、manual。複数の値をスペース区切りで指定可能。manual を指定した場合は他のオプションと同時に指定することはできません。
offset number | string 0 ポップオーバーのターゲットからのオフセット。詳細は Popper.js ドキュメントを参照。
fallbackPlacement string | array 'flip' Popper.js がフォールバックの際に取り得る位置。詳細は Popper.js ドキュメントを参照。
boundary string | element 'scrollParent' ポップオーバーのオーバーフロー制約の境界の指定。'viewport', 'window', 'scrollParent' または HTML 要素 (JavaScript only)。詳細は Popper.js ドキュメントを参照。