Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
カラーユーティリティ（Colors） v4.1.0追加
いくつかの色のユーティリティクラスを使用して意味を色で伝える。リンクにも適用され、デフォルトのリンクスタイルと同じようにホバー状態のスタイリングリンクのサポートも含む。
視力の弱い人や色盲のユーザーに配慮して、v3のものよりコントラスト比を高めて鮮やかな色遣いになった。
特異性の扱い
各色のクラスは、別のセレクタの特異性のために適用できないことがある。場合によっては、要素のコンテンツを <div> で囲むようにすれば十分。
文字色（Color）v4.1.0一部追加
文字色の種類
各文字色のクラスは、提供されたホバーとフォーカス状態のアンカーでもうまく機能する。.text-white と .text-muted クラスでは下線以外のリンクのスタイルがないことに注意（色は濃いめに強調変化しない）。
Primary：.text-primary
通常の文章の場合とリンクを貼った場合。
Secondary：.text-secondary v4.0.0追加
通常の文章の場合とリンクを貼った場合。
Success：.text-success
通常の文章の場合とリンクを貼った場合。
Info：.text-info
通常の文章の場合とリンクを貼った場合。
Warning：.text-warning
通常の文章の場合とリンクを貼った場合。
Danger：.text-danger
通常の文章の場合とリンクを貼った場合。
Light：.text-light v4.0.0追加
通常の文章の場合とリンクを貼った場合。
※色が見やすいように背景色をつけています
Dark：.text-dark v4.0.0追加
通常の文章の場合とリンクを貼った場合。
Body（標準の文字色と同じ配色）：.text-body v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
Muted：.text-muted
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
White：.text-white v4.0.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています
Black-50（50％不透明な黒色）：.text-black-50 v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
White-50（50％不透明な白色）：.text-white-50 v4.1.0追加
通常の文章の場合とリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています
※標準の場合（参考）：
通常の文章の場合とリンクを貼った場合。
設定例
<span class="text-primary">通常の文章の場合</span>と<a href="#" class="text-primary">リンクを貼った</a>場合。【設定】
<p>や<span>などの要素に.text-{themecolor}（上記の「文字色の種類」から選択）を入れる{themecolor}は、primary,secondary,success,info,warning,danger,light,dark,muted,body,white,black-50,white-50のいずれかを選択<a>タグに.text-{themecolor}を入れると、ホバー時に濃いめに強調表示される（.text-body,.text-muted,.text-white,.text-black-50,.text-white-50を除く）
【Bootstrap3.xとの変更箇所】
.text-mutedでリンクのスタイルはなくなる
背景色（Background Color）v4.0.0一部追加
文字色のクラスと同様、要素の背景色を任意の背景色クラスで簡単に設定可能。アンカー要素では、文字色クラスと同様に、ホバー時に濃いめになる。背景色ユーティリティでは color を設定していないので、場合によっては .text-{color} ユーティリティを使用する必要がある。
背景色の種類
●段落全体に背景色を設定する 色が見やすいように空白を設けています
.bg-primary.bg-secondary v4.0.0追加.bg-success.bg-info.bg-warning.bg-danger.bg-light v4.0.0追加.bg-dark v4.0.0追加.bg-white v4.0.0追加（※標準の背景色と同じ配色）.bg-transparent v4.0.0追加●文章の一部分に背景色を設定する
Primary：.bg-primary
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Secondary：.bg-secondary v4.0.0追加
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Success：.bg-success
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Info：.bg-info
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Warning：.bg-warning
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Danger：.bg-danger
標準の文字色と白色の文字の場合。さらにリンクを貼った（←リンクを貼った）場合。
Light：.bg-light v4.0.0追加
標準の文字色と白色の文字（←白色の文字）の場合。さらにリンクを貼った場合。
Dark：.bg-dark v4.0.0追加
標準の文字色（←標準の文字色）と白色の文字の場合。さらにリンクを貼った場合。
White：.bg-white v4.0.0追加（※標準の背景色と同じ配色）
標準の文字色と白色の文字（←白色の文字）の場合。さらにリンクを貼った場合。 注）リンクのスタイルは設定されていないが参考で表示
設定例
段落全体に背景色を設定する<div class="p-3 mb-2 bg-primary text-white">...</div>
文章の一部分に背景色を設定する<p><span class="bg-primary">標準の文字色</span>と<span class="bg-primary text-white">白色の文字</span>の場合。さらに<a href="#" class="bg-primary">リンクを貼った</a>場合。
【設定】
<div>や<span>などの要素に.bg-{themecolor}（上記の「背景色の種類」から選択）を入れる{themecolor}は、primary,secondary,success,info,warning,danger,light,dark,white,transparentのいずれかを選択- 背景色によっては、
.text-whiteなど見やすい色の文字を追加する必要あり <a>タグに.bg-{themecolor}を入れると、ホバー時に濃いめに強調表示される（.bg-whiteと.bg-transparentを除く）
【Bootstrap3.xとの変更箇所】
.bg-primaryのデフォルトの文字色が白でなくなったので、白色の文字にする場合は.text-whiteを追加する必要あり
定義済みの文字色と背景色の配色
.bg-primary |
.bg-secondary |
.bg-success |
.bg-info |
.bg-warning |
.bg-danger |
.bg-light |
.bg-dark |
.bg-white |
|
.text-primary |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-secondary |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-success |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-info |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-warning |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-danger |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-light |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-dark |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-body |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-muted |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-white |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-black-50 |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
.text-white-50 |
文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 | 文字 |
背景色のグラデーション化（Background gradient）v4.0.0新設
$enable-gradients を true（デフォルトでは false）に設定されているときは、.bg-gradient- ユーティリティクラスが使用可能。これらのクラスなどを有効にするはSassのオプションについて学習すること。
※このクラスを有効にするには、
- ツールのセットアップを実行。
- Bootstrap4のソースファイルの
/scss/_variables.scssのOptionsの項目にある$enable-gradients: false !default;を$enable-gradients: true !default;に変更。 - コマンドラインから
npm run testを実行。 dist/css/内のbootstrap.cssまたはbootstrap.min.cssに.bg-gradient-{themecolor}の設定が追加される（他に.btn-{themecolor},.alert-{themecolor}の背景色なども変更される）。
bootstrap.min.css をCDNで使用している場合は、.bg-gradient-{themecolor} 関連の設定を取り出して、任意のcssファイルに組み込むのがベター。
背景色の種類 クラスを有効にして表示
●段落全体に背景色を設定する 色が見やすいように空白を設けています
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark設定例
<div class="p-3 mb-2 bg-gradient-primary text-white">...</div>【設定】
<div>などの要素に.bg-gradient-{themecolor}（上記の「背景色の種類」から選択）を入れる{themecolor}は、primary,secondary,success,info,warning,danger,light,darkのいずれかを選択- 背景色によっては、
.text-whiteなど見やすい色の文字を追加する必要あり
支援技術にカラー名の意味を伝えること
カラー名を使用して意味を追加すれば視覚的な指示が提供されるが、これはスクリーンリーダーなどの支援技術のユーザーには伝わらない。カラー名で示される情報がコンテンツ自体（可視テキストなど）から明らかであるか、または .sr-only クラスで隠された追加のテキストなどの代替手段を入れるようにすること。