Bootstrap 5 provides some representative color classes: You can set the text color transparency to 50%, using the Use in links The classes that provide background colors include: Note that the background color does not set the color of the text, and in some cases you need to match the
.text-muted
,
.text-primary
,
.text-success
,
.text-info
,
.text-warning
,
.text-danger
,
.text-
secondary
,
.text-white
,
.text-dark
,
.text-body
(Default color, black) and
.text-light
: 7.6.1. Example ¶
<div class="container">
<h2>Text color representing the specified meaning</h2>
<p class="text-muted">Soft text.</p>
<p class="text-primary">Important text.</p>
<p class="text-success">The text of successful execution.</p>
<p class="text-info">Text representing some prompt information.</p>
<p class="text-warning">Warning text.</p>
<p class="text-danger">Dangerous operation text.</p>
<p class="text-secondary">Subtitle.</p>
<p class="text-dark">Dark gray text.</p>
<p class="text-body">The default color is black.</p>
<p class="text-light">Light gray text (unclear on a white background).</p>
<p class="text-white">White text (unclear on a white background).</p>
</div>
.text-black-50
or
.text-white-50
class: 7.6.2. Example ¶
<p class="text-black-50">Black text with a transparency of 50% and a background of white.</p>
<p class="text-white-50 bg-dark">White text with a transparency of 50% and a black background.</p>
7.6.3. Example ¶
<div class="container">
<h2>text color</h2>
<p>Move the mouse to the link.</p>
<a href="#" class="text-muted">Soft links.</a>
<a href="#" class="text-primary">Main link.</a>
<a href="#" class="text-success">Successfully linked.</a>
<a href="#" class="text-info">Information text link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Dangerous links.</a>
<a href="#" class="text-secondary">Subtitle link.</a>
<a href="#" class="text-dark">Dark gray links.</a>
<a href="#" class="text-light">Light gray links.</a>
</div>
Background color ¶
.bg-primary
,
.bg-success
,
.bg-info
,
.bg-
warning
,
.bg-danger
,
.bg-secondary
,
.bg-dark
and
.bg-light
.text-\*
class is used together. 7.6.4. Example ¶
<div class="container">
<h2>Background</h2>
<p class="bg-primary text-white">Important background colors。</p>
<p class="bg-success text-white">Successfully executed background color.</p>
<p class="bg-info text-white">Information prompt background color.</p>
<p class="bg-warning text-white">Warning background color</p>
<p class="bg-danger text-white">Dangerous background color.</p>
<p class="bg-secondary text-white">Subtitle background color.</p>
<p class="bg-dark text-white">Dark gray background color.</p>
<p class="bg-light text-dark">Light gray background color.</p>
</div>