色

文字色

.text-(primary|secondary|success|danger|warning|info|light|dark|body|muted|white|black-50|white-50)

文字サンプル

span.text-(primary|secondary|...)

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

リンクサンプル

a.text-(primary|secondary|...)

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Body link

Muted link

White link

Black-50 link

White-50 link

背景色

.bg-(primary|secondary|success|danger|warning|info|light|dark|white|transparent)

表示

CSSの display プロパティ(要素の表示と配置)を設定するユーティリティクラス

記法

.d(-sm|-md|-lg|-xl)?-(none|inline|inline-block|block|...)

レスポンシブ設定

• .d- xs(デフォルト)で適用
• .d-sm- sm(≧576px)で適用
• .d-md- md(≧768px)で適用
• .d-lg- lg(≧992px)で適用
• .d-xl- xl(≧1200px)で適用

display プロパティの設定 (詳しくはCSSリファレンス参照)

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

要素のデフォルト設定の変更

Inlineを強制したdiv : div.d-inline ⇒ 横に並ぶ

Blockを強制したspan : span.d-block ⇒ 縦に並ぶ

span.d-blockspan.d-block

要素の表示/非表示制御

(1) md(768px≤幅<992px)のみ非表示にするブロック要素は次の2つの組み合わせで実現できる(優先度低 ⇒ 高の順)

• デフォルトは「block要素として表示」
• .d-md-none md以上で非表示(デフォルトより優先)
• .d-lg-block md以上で表示(優先度最大)

サンプル(全条件の設定はソース参照)

(2) md(768px≤幅<992px)のみ表示するブロック要素は次の3つの組み合わせで実現できる(優先度低 ⇒ 高の順)

• .d-non デフォルトを非表示に設定(優先度最小)
• .d-md-block md以上で表示
• .m-lg-none lg以上で非表示(優先度最大)

サンプル(全条件の設定はソース参照)

印刷に対する制御

.d-print-(none|inline|inline-block+block|...) を使い印刷時だけ有効な display の設定を行うことができる(略)。

埋め込み

埋め込みオブジェクト(動画など)のレスポンシブ設定

• 親 div.embed-responsive.embed-responsive-(21by9|16by9|4by3|1by1)
  • 子 (iframe|embed|video|object).embed-responsible-item
    • 属性 src="..."

アスペクト比

親の (21by9|16by9|4by3|1by1) はアスペクト比を設定する。

• 21by9 21:9 - Ultra-Widescreen (シネマスコープ)
• 16by9 16:9 - HD TV (ハイビジョン)
• 4by3 4:3 - SD TV (アナログTV)
• 1by1 1:1 - 正方形

設定例