These docs are for the prereleased 1.0.0.alpha2 version of Bootstrap Email - Give Feedback

Text Color

Give text any color you want.

Class Properties
.text-primarycolor: #0d6efd;Email
.text-secondarycolor: #6c757d;Email
.text-successcolor: #198754;Email
.text-infocolor: #0dcaf0;Email
.text-warningcolor: #ffc107;Email
.text-dangercolor: #dc3545;Email
.text-lightcolor: #f8f9fa;Email
.text-darkcolor: #212529;Email
.text-blackcolor: #000000;Email
.text-whitecolor: #ffffff;Email
.text-transparentcolor: transparent;Email
.text-gray-100color: #f8f9fa;Email
.text-gray-200color: #e9ecef;Email
.text-gray-300color: #dee2e6;Email
.text-gray-400color: #ced4da;Email
.text-gray-500color: #adb5bd;Email
.text-gray-600color: #6c757d;Email
.text-gray-700color: #495057;Email
.text-gray-800color: #343a40;Email
.text-gray-900color: #212529;Email
.text-blue-100color: #cfe2ff;Email
.text-blue-200color: #9ec5fe;Email
.text-blue-300color: #6ea8fe;Email
.text-blue-400color: #3d8bfd;Email
.text-blue-500color: #0d6efd;Email
.text-blue-600color: #0a58ca;Email
.text-blue-700color: #084298;Email
.text-blue-800color: #052c65;Email
.text-blue-900color: #031633;Email
.text-indigo-100color: #e0cffc;Email
.text-indigo-200color: #c29ffa;Email
.text-indigo-300color: #a370f7;Email
.text-indigo-400color: #8540f5;Email
.text-indigo-500color: #6610f2;Email
.text-indigo-600color: #520dc2;Email
.text-indigo-700color: #3d0a91;Email
.text-indigo-800color: #290661;Email
.text-indigo-900color: #140330;Email
.text-purple-100color: #e2d9f3;Email
.text-purple-200color: #c5b3e6;Email
.text-purple-300color: #a98eda;Email
.text-purple-400color: #8c68cd;Email
.text-purple-500color: #6f42c1;Email
.text-purple-600color: #59359a;Email
.text-purple-700color: #432874;Email
.text-purple-800color: #2c1a4d;Email
.text-purple-900color: #160d27;Email
.text-pink-100color: #f7d6e6;Email
.text-pink-200color: #efadce;Email
.text-pink-300color: #e685b5;Email
.text-pink-400color: #de5c9d;Email
.text-pink-500color: #d63384;Email
.text-pink-600color: #ab296a;Email
.text-pink-700color: #801f4f;Email
.text-pink-800color: #561435;Email
.text-pink-900color: #2b0a1a;Email
.text-red-100color: #f8d7da;Email
.text-red-200color: #f1aeb5;Email
.text-red-300color: #ea868f;Email
.text-red-400color: #e35d6a;Email
.text-red-500color: #dc3545;Email
.text-red-600color: #b02a37;Email
.text-red-700color: #842029;Email
.text-red-800color: #58151c;Email
.text-red-900color: #2c0b0e;Email
.text-orange-100color: #ffe5d0;Email
.text-orange-200color: #fecba1;Email
.text-orange-300color: #feb272;Email
.text-orange-400color: #fd9843;Email
.text-orange-500color: #fd7e14;Email
.text-orange-600color: #ca6510;Email
.text-orange-700color: #984c0c;Email
.text-orange-800color: #653208;Email
.text-orange-900color: #331904;Email
.text-yellow-100color: #fff3cd;Email
.text-yellow-200color: #ffe69c;Email
.text-yellow-300color: #ffda6a;Email
.text-yellow-400color: #ffcd39;Email
.text-yellow-500color: #ffc107;Email
.text-yellow-600color: #cc9a06;Email
.text-yellow-700color: #997404;Email
.text-yellow-800color: #664d03;Email
.text-yellow-900color: #332701;Email
.text-green-100color: #d1e7dd;Email
.text-green-200color: #a3cfbb;Email
.text-green-300color: #75b798;Email
.text-green-400color: #479f76;Email
.text-green-500color: #198754;Email
.text-green-600color: #146c43;Email
.text-green-700color: #0f5132;Email
.text-green-800color: #0a3622;Email
.text-green-900color: #051b11;Email
.text-teal-100color: #d2f4ea;Email
.text-teal-200color: #a6e9d5;Email
.text-teal-300color: #79dfc1;Email
.text-teal-400color: #4dd4ac;Email
.text-teal-500color: #20c997;Email
.text-teal-600color: #1aa179;Email
.text-teal-700color: #13795b;Email
.text-teal-800color: #0d503c;Email
.text-teal-900color: #06281e;Email
.text-cyan-100color: #cff4fc;Email
.text-cyan-200color: #9eeaf9;Email
.text-cyan-300color: #6edff6;Email
.text-cyan-400color: #3dd5f3;Email
.text-cyan-500color: #0dcaf0;Email
.text-cyan-600color: #0aa2c0;Email
.text-cyan-700color: #087990;Email
.text-cyan-800color: #055160;Email
.text-cyan-900color: #032830;Email

Usage

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


Compiled Example

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>