テキスト
アラインメント
均等割り付け .text-justify
.text-justify なし
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
.text-justify あり
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
左/中央/右寄せ .text(-sm|-md|-lg|-xl)?-(left|center|right)
.text-left
Left aligned on all viewport sizes.
.text-center
Center aligned on all viewport sizes.
.text-right
Right aligned on all viewport sizes.
.text-sm-center
Center aligned on viewport width ≧ 576px
.text-md-center
Center aligned on viewport width ≧ 768px
.text-lg-center
Center aligned on viewport width ≧ 992px
.text-xl-center
Center aligned on viewport width ≧ 1200px
.text-sm-right
Right aligned on viewport width ≧ 576px
.text-md-right
Right aligned on viewport width ≧ 768px
.text-lg-right
Right aligned on viewport width ≧ 992px
.text-xl-right
Right aligned on viewport width ≧ 1200px
ラッピングとオーバーフロー
(1) ラッピング (ボックス幅は 15rem に固定)
.text-nowrap なし
.text-nowrap あり
(2) ブロック要素に対する切り詰め (ボックス幅は 15rem に固定)
.text-truncate なし
.text-truncate なし
(2) インラインブロック要素に対する切り詰め (ボックス幅は style="max-width: 15rem;" に制限)
.text-truncate なし
.text-truncate なし
大文字/小文字変換
(デフォルト表示)
The quick brown fox jumps over the lazy dog.
.text-lowercase
The quick brown fox jumps over the lazy dog.
.text-uppercase
The quick brown fox jumps over the lazy dog.
.text-capitalize
The quick brown fox jumps over the lazy dog.
文字の太さと斜体
.font-weight-normal (デフォルト)
The quick brown fox jumps over the lazy dog.
.font-weight-bold
The quick brown fox jumps over the lazy dog.
.font-weight-light
The quick brown fox jumps over the lazy dog.
.font-italic
The quick brown fox jumps over the lazy dog.
(Ver 4.2以降) .font-weight-(bolder|lighter) は親要素の設定に対して相対的にフォント太さを増減する。
例(p): base >
bolder > even bolder
例(p.font-weight-bold): base >
lighter > even lighter
等幅フォント
.text-monospace
This is in monospace.
色設定の継承
.reset-color は要素の色設定を除去して親要素の色設定を継承する。
Muted text with a reset link.
テキスト飾りの除去
.text-decoration-none はテキストのデフォルト修飾設定を除去する。
u ⇒
Underline
u.text-decoration-none ⇒
No underline
上下アライン
CSSの vertical-align プロパティを設定するユーティリティクラス (詳しくはCSSリファレンス参照)。
.align-(baseline|top|middle|bottom|text-top|text-bottom)
例
インライン要素 span に設定した .align-*
baselinetopmiddlebottomtext-toptext-bottom
テーブルセル td に設定した .align-* (テーブル高さは 8rem 固定)
| baseline | top | middle | bottom | text-top | text-bottom |
可視性
CSSの visibility プロパティを設定するユーティリティクラス(詳しくはCSSリファレンス参照)。
.visible⇒visibility: visibleに設定.invisible⇒visibility: hiddenに設定
応用例
次のグリッドレイアウトを考える。
Bootstrapには2種類の消去用ユーティリティがあり、この場合は結果が異なる。
.d-none (表示ユーティリティ参照) ⇒ 要素はレイアウトから取り除かれ組み換えが発生する
.invisible ⇒ 要素は非表示になるだけで組み換えは発生しない