Text ColorsBootstrap 4 có các class có thể cung cấp màu sắc cho chữ. Đó là: .text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (default body color/thường màu black) và .text-light : Ví dụ
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
This text is muted. This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger. Secondary text. Dark grey text. Body text. Có thể sử dụng trên các liên kết (link) với màu hover tối hơn chút Ví dụ<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.
Bạn có thể add 50% opacity cho text black hoặc white với class .text-black-50 hoặc .text-white-50 : Ví dụ
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
Black text with 50% opacity on white background White text with 50% opacity on black background
Background ColorsClass cho background colors gồm: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light . Chú ý rằng background colors không set text color, vì vậy nên trong một số trường hợp bạn muốn sử dụng chúng cùng nhau bằng cách sử dụng class .text-* . Ví dụ
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger. Secondary background color. Dark grey background color. Light grey background color. |