Bootstrap 4 のテキスト関係の装飾クラスやタグ指定などのまとめ。

<p class="h1">class="h1"：サンプル</p>

<h1>&lt;h1&gt;タグ：サンプル</h1>

<h2>見出し<small class="text-muted">副見出し</small></h2>

<p class="display-1">display-1</p>

<strong>strongタグ（クラスなし）強調</strong><br>
<b>bタグ（クラスなし）太字</b><br>
<span class="font-weight-bold">font-weight-boldクラス 太字</span><br>
<span class="font-weight-normal">font-weight-normalクラス 標準</span><br>
<span class="font-weight-light">font-weight-lightクラス 細字</span><br>
<em>emタグ（クラスなし）強調（斜体 ※ブラウザによる）</em><br>
<span class="font-italic">font-italicクラス 斜体</span><br>
<del>delタグ（クラスなし）</del><br>
<mark>markタグ　ハイライト</mark><br>
<span class="mark">markクラス（markタグと同様）</span><br>
<ins>insタグ（クラスなし）後から追加されたテキスト</ins><br>
<span>何も指定なし</span><br>
<small>smallタグ（font-sizeが80%になります）</small>
<p class="small">smallクラス（smallタグと同様）</p>
<p class="lead">leadクラス</p>

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

<span class="text-hide">ここが透明になっています。</span>←完全な透明文字 text-hideクラス<br>

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

<p class="text-left">text-leftクラス</p>
<p class="text-center">text-centerクラス</p>
<p class="text-right">text-rightクラス</p>
<p class="text-justify">text-justifyクラス（両端揃え※ブラウザ依存）</p>
<p class="text-nowrap">text-nowrapクラス（折り返さずに配置。端まで行くと横スクロールバーのお世話になります。長文メッセージテスト。）</p>

<span class="text-primary">text-primaryクラス</span><br>
<span class="text-secondary">text-secondaryクラス</span><br>
<span class="text-success">text-successクラス</span><br>
<span class="text-info">text-infoクラス</span><br>
<span class="text-warning">text-warningクラス</span><br>
<span class="text-danger">text-dangerクラス</span><br>
<span class="text-dark">text-darkクラス</span><br>
<span class="text-muted">text-mutedクラス</span><br>
<span class="text-light bg-dark">text-lightクラス</span><br>
<span class="text-white bg-dark">text-whiteクラス</span><br>
<span class="text-black-50 bg-white">text-black-50クラス 黒＋透明色50%</span><br>
<span class="text-white-50 bg-dark">text-white-50クラス 白＋透明色50%</span><br>
<span class="text-body">text-bodyクラス</span><br>

.text-primary {
  color: #007bff !important;
}

.text-red {
  color: #ff0000 !important;
}

<p class="text-red">赤色のテキスト</p>

<span class="bg-primary">bg-primaryクラス</span><br>
<span class="bg-secondary">bg-secondaryクラス</span><br>
<span class="bg-success">bg-successクラス</span><br>
<span class="bg-info">bg-infoクラス</span><br>
<span class="bg-warning">bg-warningクラス</span><br>
<span class="bg-danger">bg-dangerクラス</span><br>
<span class="bg-dark">bg-darkクラス</span><br>
<span class="bg-muted">bg-mutedクラスはありません</span><br>
<span class="bg-light">bg-lightクラス</span><br>
<span class="bg-white">bg-whiteクラス</span><br>

.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus {
  background-color: #0062cc !important;
}

.bg-green {
  background-color: #00ff00 !important;
}

a.bg-green:hover, a.bg-green:focus {
  background-color: #31B404 !important;
}

<a class="bg-green text-white" href="#">　自作した緑色背景　</a>

<blockquote class="blockquote">
引用文はblockquoteタグを指定した上で、blockquoteクラスも指定します。<br>
<footer class="blockquote-footer">出典元の表示としてblockquote-footerクラスが用意されています。
<cite title="出典元の名前">出典元</cite></footer>
</blockquote>

blockquote {
  margin: 0 0 1rem;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014 \00A0";
}

<p>等幅フォント<br><span class="text-monospace">abcdEFG0123456あいうえお</span></p>
<p>通常フォント<br>abcdEFG0123456あいうえお</p>

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}