Bootstrap 4 tutorial

コンポーネント(3): カード

カード

基本例

Card title

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

Go somewhere

構造

親 div.card 属性
- 属性(幅固定) style="width: 18rem;"
- トップ画像 img.card-img-top 属性
  - 属性 src="..."
  - 属性 alt="..."
- ボディ div.card-body
  - タイトル h5.card-title
    - テキスト Card title
  - 本文 p.card-text
    - テキスト Some quick example text ...
  - ボタン a.btn.btn-(primary|secondary|...) 属性
    - 属性 href="..."
    - テキスト Go somewhere

構成要素

以下の書式設定はカード用だが、他の目的にも使用できる。

ボディ

ボディ(本文)は全体を div.card-body で囲む。

This is some text within a card body.

構造

div.card
- div.card-body
  - テキスト This is some text within a card body.

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

カード用の書式設定: まとめて示す。

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

構造

タイトル (h1|h2|h3...).card-title (上例は h5.card-title )
サブタイトル (h1|h2|h3...).card-subtitle (上例は h6.card-subtitle )
リンク (a).card-link
テキスト (p).card-text

画像

img.card-img-topでカード上部に配置する。

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

構造

div.card
- img.card-img-top
- div.card-body

この場合は div.card-body の中ではなく兄弟要素として用いることに注意。より詳しくは画像の設定を参照。

リストグループ

基本構造(フラッシュリスト)

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

構造

リスト ul.list-group.list-group-flush
- アイテム li.list-group-item

ヘッダの設定

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

構造

親 div.card
- ヘッダ(次の例の Featured ) div.card-header (次のリストに上下密着して配置)
- リスト+子アイテム(以下同じ)

アイテムの積み重ね

組み合わせ例

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

Card link Another link

構造

親 div.card
- トップ画像 img.card-img-top
- カードボディ div.card-body : 内部に次の4つを積み重ね
  - タイトル h5.card-title
  - テキスト p.card-text
  - リスト ul.list-group.list-group-flush
  - リンク a.card-link (×2, 横並びに配置) 属性
    - 属性 href="..."
    - テキスト(例) Card link
  - リンク a.card-link

ヘッダ、フッタ

基本構造( .card-body の中ではなく、最初または最後の兄弟として設定)

構造

親 div.card
- ヘッダ(最初の子) div.card-header
- ボディ ( div.card-body , etc.)
- フッタ(最後の子) div.card-footer

ヘッダのみの基本例( Featured の部分)

Featured

Special title treatment

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

Go somewhere

ヘッダテキストを h5.card-header で太く表示

Featured

Special title treatment

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

Go somewhere

ボディに blockquote による引用文を用いた例

Quote

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

Someone famous in Source Title

ヘッダ/フッタ両方設定、さらに .text-center でセンタリング

Featured

Special title treatment

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

Go somewhere

2 days ago

幅の設定

div.card はデフォルトでは幅いっぱい(親に対し100%)に割り当てる。幅の設定(調整)には様々な方法がある。

グリッドによる設定

レスポンシブ設定の例: mdブレークポイント(768px)で1行2列と2行1列を切り替え

Special title treatment (1)

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

Go somewhere

Special title treatment (2)

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

Go somewhere

構造

div.row
- div.col-md-6
  - div.card
    - (上と同じ)
- div.col-md-6
  - div.card
    - (上と同じ)

サイズユーティリティによる設定

.w-(25|50|75|100) を用いた幅設定 (⇒ サイズユーティリティ )

div.card.w-75

Card title

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

Button

div.card.w-50

Card title

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

Button

スタイル属性 `style="..."` による幅設定

div.card + style="width: 16rem;"

Card title

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

Button

div.card + style="width: 24rem;"

Card title

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

Button

テキストの配置

テキストユーティリティ .text-(left|center|right) を用いた配置(⇒ テキスト - アラインメント )

div.card.text-left (デフォルト)

Special title treatment

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

Go somewhere

div.card.text-center

Special title treatment

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

Go somewhere

div.card.text-right

Special title treatment

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

Go somewhere

ナビゲーションコンポーネントとの組み合わせ例

ul.nav.nav-tabs.card-header-tabs

Special title treatment

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

Go somewhere

ul.nav.nav-pills.card-header-tabs

Special title treatment

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

Go somewhere

画像の設定

ヘッダやフッタに画像を用いる場合は img.card-img-(top|bottom) を設定する。

img.card-img-bottom

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

img.card-img-bottom

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.card-img-overlay を用いる。

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.card.text-white.bg-primary

Header

Primary card title

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

div.card.text-white.bg-secondary

Header

Secondary card title

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

div.card.text-white.bg-success

Header

Success card title

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

div.card.text-white.bg-danger

Header

Danger card title

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

div.card.text-white.bg-warning

Header

Warning card title

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

div.card.text-white.bg-info

Header

Info card title

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

div.card.bg-light

Header

Light card title

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

div.card.text-white.bg-dark

Header

Dark card title

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

ボーダーの設定

ボーダーユーティリティを用いる(⇒ ボーダー色 )。

div.card.border-primary

Header

Primary card title

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

div.card.border-secondary

Header

Secondary card title

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

div.card.border-success

Header

Success card title

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

div.card.border-danger

Header

Danger card title

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

div.card.border-warning

Header

Warning card title

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

div.card.border-info

Header

Info card title

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

div.card.border-light

Header

Light card title

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

div.card.border-dark

Header

Dark card title

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

設定の組み合わせ

ヘッダ/フッタなどの各構成要素には親要素と別のテキスト/背景/ボーダー設定が可能。さらに .bg-transparent で背景なしにすることも可能。設定例を次に示す。

構造

div.card.border-success 外枠はsuccess配色
- div.card-header にバリエーション設定(デフォルト+全context+transparent)
- p.card-body.text-success
  - 内部テキストはsuccess配色
- div.card-footer にバリエーション設定(デフォルト+全context+transparent)

(デフォルト背景)

Default header

Success card title

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

Default footer

.bg-primary

Primary header

Success card title

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

Primary footer

.bg-secondary

Secondary header

Success card title

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

Secondary footer

.bg-success

Success header

Success card title

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

Success footer

.bg-danger

Danger header

Success card title

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

Danger footer

.bg-warning

Warning header

Success card title

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

Warning footer

.bg-info

Info header

Success card title

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

Info footer

.bg-light

Light header

Success card title

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

Light footer

.bg-dark

Dark header

Success card title

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

Dark footer

.bg-transparent

Transparent header

Success card title

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

Transparent footer

レイアウト

親を追加 div.card-(group|deck|columns)
- 子(複数) div.card

div.card-group

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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

div.card-deck

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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

div.card-columns (応用) 3段組みレイアウト

(1) Card title that wraps to a new line

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

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

Someone famous in Source Title

(3) Card title

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

Last updated 3 mins ago

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

Someone famous in Source Title

(5) Card title

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

Last updated 3 mins ago

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

Someone famous in Source Title

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