| Class | Properties | |
|---|---|---|
| .text-primary | color: #0d6efd; | |
| .text-secondary | color: #6c757d; | |
| .text-success | color: #198754; | |
| .text-info | color: #0dcaf0; | |
| .text-warning | color: #ffc107; | |
| .text-danger | color: #dc3545; | |
| .text-light | color: #f8f9fa; | |
| .text-dark | color: #212529; | |
| .text-black | color: #000000; | |
| .text-white | color: #ffffff; | |
| .text-transparent | color: transparent; | |
| .text-gray-100 | color: #f8f9fa; | |
| .text-gray-200 | color: #e9ecef; | |
| .text-gray-300 | color: #dee2e6; | |
| .text-gray-400 | color: #ced4da; | |
| .text-gray-500 | color: #adb5bd; | |
| .text-gray-600 | color: #6c757d; | |
| .text-gray-700 | color: #495057; | |
| .text-gray-800 | color: #343a40; | |
| .text-gray-900 | color: #212529; | |
| .text-blue-100 | color: #cfe2ff; | |
| .text-blue-200 | color: #9ec5fe; | |
| .text-blue-300 | color: #6ea8fe; | |
| .text-blue-400 | color: #3d8bfd; | |
| .text-blue-500 | color: #0d6efd; | |
| .text-blue-600 | color: #0a58ca; | |
| .text-blue-700 | color: #084298; | |
| .text-blue-800 | color: #052c65; | |
| .text-blue-900 | color: #031633; | |
| .text-indigo-100 | color: #e0cffc; | |
| .text-indigo-200 | color: #c29ffa; | |
| .text-indigo-300 | color: #a370f7; | |
| .text-indigo-400 | color: #8540f5; | |
| .text-indigo-500 | color: #6610f2; | |
| .text-indigo-600 | color: #520dc2; | |
| .text-indigo-700 | color: #3d0a91; | |
| .text-indigo-800 | color: #290661; | |
| .text-indigo-900 | color: #140330; | |
| .text-purple-100 | color: #e2d9f3; | |
| .text-purple-200 | color: #c5b3e6; | |
| .text-purple-300 | color: #a98eda; | |
| .text-purple-400 | color: #8c68cd; | |
| .text-purple-500 | color: #6f42c1; | |
| .text-purple-600 | color: #59359a; | |
| .text-purple-700 | color: #432874; | |
| .text-purple-800 | color: #2c1a4d; | |
| .text-purple-900 | color: #160d27; | |
| .text-pink-100 | color: #f7d6e6; | |
| .text-pink-200 | color: #efadce; | |
| .text-pink-300 | color: #e685b5; | |
| .text-pink-400 | color: #de5c9d; | |
| .text-pink-500 | color: #d63384; | |
| .text-pink-600 | color: #ab296a; | |
| .text-pink-700 | color: #801f4f; | |
| .text-pink-800 | color: #561435; | |
| .text-pink-900 | color: #2b0a1a; | |
| .text-red-100 | color: #f8d7da; | |
| .text-red-200 | color: #f1aeb5; | |
| .text-red-300 | color: #ea868f; | |
| .text-red-400 | color: #e35d6a; | |
| .text-red-500 | color: #dc3545; | |
| .text-red-600 | color: #b02a37; | |
| .text-red-700 | color: #842029; | |
| .text-red-800 | color: #58151c; | |
| .text-red-900 | color: #2c0b0e; | |
| .text-orange-100 | color: #ffe5d0; | |
| .text-orange-200 | color: #fecba1; | |
| .text-orange-300 | color: #feb272; | |
| .text-orange-400 | color: #fd9843; | |
| .text-orange-500 | color: #fd7e14; | |
| .text-orange-600 | color: #ca6510; | |
| .text-orange-700 | color: #984c0c; | |
| .text-orange-800 | color: #653208; | |
| .text-orange-900 | color: #331904; | |
| .text-yellow-100 | color: #fff3cd; | |
| .text-yellow-200 | color: #ffe69c; | |
| .text-yellow-300 | color: #ffda6a; | |
| .text-yellow-400 | color: #ffcd39; | |
| .text-yellow-500 | color: #ffc107; | |
| .text-yellow-600 | color: #cc9a06; | |
| .text-yellow-700 | color: #997404; | |
| .text-yellow-800 | color: #664d03; | |
| .text-yellow-900 | color: #332701; | |
| .text-green-100 | color: #d1e7dd; | |
| .text-green-200 | color: #a3cfbb; | |
| .text-green-300 | color: #75b798; | |
| .text-green-400 | color: #479f76; | |
| .text-green-500 | color: #198754; | |
| .text-green-600 | color: #146c43; | |
| .text-green-700 | color: #0f5132; | |
| .text-green-800 | color: #0a3622; | |
| .text-green-900 | color: #051b11; | |
| .text-teal-100 | color: #d2f4ea; | |
| .text-teal-200 | color: #a6e9d5; | |
| .text-teal-300 | color: #79dfc1; | |
| .text-teal-400 | color: #4dd4ac; | |
| .text-teal-500 | color: #20c997; | |
| .text-teal-600 | color: #1aa179; | |
| .text-teal-700 | color: #13795b; | |
| .text-teal-800 | color: #0d503c; | |
| .text-teal-900 | color: #06281e; | |
| .text-cyan-100 | color: #cff4fc; | |
| .text-cyan-200 | color: #9eeaf9; | |
| .text-cyan-300 | color: #6edff6; | |
| .text-cyan-400 | color: #3dd5f3; | |
| .text-cyan-500 | color: #0dcaf0; | |
| .text-cyan-600 | color: #0aa2c0; | |
| .text-cyan-700 | color: #087990; | |
| .text-cyan-800 | color: #055160; | |
| .text-cyan-900 | color: #032830; |
A simple way to adjust the line height of text.
<span class="text-primary">Primary Text color</span>
<span class="text-muted">Muted Text color</span>
<span class="text-danger">Danger Text color</span>
<span class="text-green-500">Green 500 Text color</span>
<span class="text-yellow-500">Yellow 500 Text color</span>
Primary Text color Muted Text color Danger Text color Green 500 Text color Yellow 500 Text color
Input
<span class="text-primary">Primary Text color</span>
<span class="text-muted">Muted Text color</span>
<span class="text-danger">Danger Text color</span>
<span class="text-green-500">Green 500 Text color</span>
<span class="text-yellow-500">Yellow 500 Text color</span>
Output
<span class="text-primary" style="color: #0d6efd;">Primary Text color</span>
<span class="text-muted" style="color: #718096;">Muted Text color</span>
<span class="text-danger" style="color: #dc3545;">Danger Text color</span>
<span class="text-green-500" style="color: #198754;">Green 500 Text color</span>
<span class="text-yellow-500" style="color: #ffc107;">Yellow 500 Text color</span>