Bootstrap 4 tutorial

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

カード

基本例

Card image cap
Card title

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

Go somewhere

構成要素

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

ボディ

ボディ(本文)は全体を 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 linkAnother link
画像

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

Card image cap

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

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

リストグループ

基本構造(フラッシュリスト)
ヘッダの設定
Featured

アイテムの積み重ね

組み合わせ例

Card image cap
Card title

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

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

ヘッダのみの基本例( 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

幅の設定

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
サイズユーティリティによる設定

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

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

Card image cap

画像内への文字重ね合わせ

画像内へテキストをオーバーレイ表示するには div.card-img-overlay を用いる。

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

配色の設定

色ユーティリティ を用いる。

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 で背景なしにすることも可能。設定例を次に示す。

(デフォルト背景)

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.

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

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

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

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

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

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

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

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

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

レイアウト

div.card-group

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.

div.card-deck

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.

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

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

Card image cap

(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