Bootstrap 4 提供了一些有代表意義的顔色類：.text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark and .text-light:
<div class="container">
<h2>代表指定意義的文本顔色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">執行成功的文本。</p>
<p class="text-info">代表一些提示資訊的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危險操作文本。</p>
<p class="text-secondary">副标題。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">淺灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
在連結中使用
<h2>文本顔色</h2>
<p>滑鼠移動到連結。</p>
<a href="#" class="text-muted">柔和的連結。</a>
<a href="#" class="text-primary">主要連結。</a>
<a href="#" class="text-success">成功連結。</a>
<a href="#" class="text-info">資訊文本連結。</a>
<a href="#" class="text-warning">警告連結。</a>
<a href="#" class="text-danger">危險連結。</a>
<a href="#" class="text-secondary">副标題連結。</a>
<a href="#" class="text-dark">深灰色連結。</a>
<a href="#" class="text-light">淺灰色連結。</a>
提供背景顔色的類有: .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景顔色不會設定文本的顔色，在一些執行個體中你需要與 .text-* 類一起使用。
<h2>背景顔色</h2>
<p class="bg-primary text-white">重要的背景顔色。</p>
<p class="bg-success text-white">執行成功背景顔色。</p>
<p class="bg-info text-white">資訊提示背景顔色。</p>
<p class="bg-warning text-white">警告背景顔色</p>
<p class="bg-danger text-white">危險背景顔色。</p>
<p class="bg-secondary text-white">副标題背景顔色。</p>
<p class="bg-dark text-white">深灰背景顔色。</p>
<p class="bg-light text-dark">淺灰背景顔色。</p>