bootstrap4 カード(元パネル)

HOME > bootstrap4 カード(元パネル)

参考サイト1

参考サイト2

参考サイト3

 

「.well」「.panel」「.thumbnail」といったクラスがbootstrap4では廃止され「.card」クラスに統一されました。

 

card基本

コメントアウトで説明を入れています。

スダンダードコースのイメージ画像

スダンダードコース

ホームページ作成・Web集客を一通り習得したい方向けです。

btn-primary

 

上の例は幅をstyleで指定していますが、.rowでレスポンシブにもできます。

ライトコースのイメージ画像

背景色変更bg-primary

テキストの色も変更しています。

btn-info
スタンダードコースのイメージ画像

背景色変更bg-secondary

テキストの色も変更しています。

btn-success
プロフェッショナルコースのイメージ画像

背景色変更bg-success

テキストの色も変更しています。

btn-secondary
プロフェッショナルコースのイメージ画像

背景色変更bg-danger

テキストの色も変更しています。

btn-warning
プロフェッショナルコースのイメージ画像

背景色変更bg-warning

テキストの色も変更しています。

btn-danger
プロフェッショナルコースのイメージ画像

背景色変更bg-info

テキストの色も変更しています。

btn-light
プロフェッショナルコースのイメージ画像

背景色変更bg-light

テキストの色は変更していません。

btn-dark
プロフェッショナルコースのイメージ画像

背景色変更bg-dark

テキストの色も変更しています。

btn-light

 

枠線とテキスト色変更

border-primary

Primary card title

text-primary

border-secondary

Secondary card title

text-secondary

border-success

Success card title

text-success

border-danger

Danger card title

text-danger

border-warning

Warning card title

text-warning

border-info

Info card title

text-info

border-light

Light card title

テキスト色変更していません。

border-dark

Dark card title

text-dark

 

画像を下に表示

imgタグにクラス.card-img-bottom

Card image cap

 

cardコンテンツのみ

card-body

 

cardタイトル・サブタイ・テキスト・リンク

.card-title

.card-subtitle..mb-2(margin-bottom0.5rem).text-muted(文字色変更)

.card-text

.card-link .card-linkと同階層にあると左に間隔

 

cardにヘッダーとフッターを追加

ヘッダーのみが今まで使っていたパネルに一番近いと思います。
背景色変更のクラスを入れた場合、ヘッダーフッターも合わせて背景色変更されます。

card-header
背景色変更と文字色変更
ヘッダーのみ
card-body
card-body

 

cardリスト付き

  • list-group-item
  • list-group-item
  • list-group-item

 

画像上に文字表示

ライトコースのイメージ画像

ライトコース

.card-bodyの代わりに.card-img-overlay

 

横並びのcard

rowクラスにno-guttersを足しています(no-guttersをつけないと画像などのレイアウトの間に隙間が発生します。)

https://www.mgm-design.jp/wp-content/uploads/2016/08/s_gori0I9A3099072103255_TP_V.jpg

ライトコース

ホームページ・ブログ開設など基礎を身に付けたい方向けコースです。

 

カードグループ

複数のカードを横に並べたカードグループを表示します。

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

 

カードデッキ

複数のカードを横に隙間を開けて並べたカードデッキを表示します。

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

 

カードカラム

カードをカラム表示します。カラム数は画面の幅によって適度に変化しますが、CSS の columns を指定することにより変更可能です。

Card image cap

Card title 1

text Sample text Sample text Sample text Sample

Card 2 text Sample text Sample text Sample text Sample

Someone famous in Source Title
Card image cap

Card title 3

text Sample text Sample text Sample text Sample

Last updated 3 mins ago

Card 4 text Sample text Sample text Sample text Sample

Someone famous in Source Title

Card title 5

text Sample text Sample text Sample text Sample

Last updated 3 mins ago

Card image

Card 6 text Sample text Sample text Sample text Sample

Someone famous in Source Title

Card title 7

text Sample text Sample text Sample text Sample

Last updated 3 mins ago