.text-primary, .text-secondary, .text-success, .text-danger 等はコンテキストに応じたテキストの色を指定します。

<div class="text-primary">.text-primary</div>
<div class="text-secondary">.text-secondary</div>
<div class="text-success">.text-success</div>
<div class="text-danger">.text-danger</div>
<div class="text-warning">.text-warning</div>
<div class="text-info">.text-info</div>
<div class="text-light bg-dark">.text-light</div>
<div class="text-dark">.text-dark</div>
<div class="text-body">.text-body</div>
<div class="text-muted">.text-muted</div>
<div class="text-white bg-dark">.text-white</div>
<div class="text-black-50">.text-black-50</div>
<div class="text-white-50 bg-dark">.text-white-50</div>

.bg-primary, .bg-secondary, .bg-success, .bg-danger はコンテキストに応じた背景色を指定します。

<div class="p-1 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-1 mb-1 bg-secondary text-white">.bg-secondary</div>
<div class="p-1 mb-1 bg-success text-white">.bg-success</div>
<div class="p-1 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-1 mb-1 bg-warning text-dark">.bg-warning</div>
<div class="p-1 mb-1 bg-info text-white">.bg-info</div>
<div class="p-1 mb-1 bg-light text-dark">.bg-light</div>
<div class="p-1 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-1 mb-1 bg-white text-dark">.bg-white</div>
<div class="p-1 mb-1 bg-transparent text-dark">.bg-transparent</div>