Text के रंग
Text colour utilities text colour करती हैं और accessible contrast के लिए background utilities के साथ अच्छी तरह pair होती हैं।
In this page:
Syntax
<p class="text-primary">text</p>
<p class="text-danger-emphasis">text</p>
<p class="text-body-secondary">text</p>Text Colors
Same theme colours text-* classes की तरह available हैं, stronger contrast के लिए -emphasis variants और neutral shades के लिए text-body-* के साथ। Coloured backgrounds पर contrast fix करने के लिए text-white या text-dark इस्तेमाल करें। text-opacity-* colour soften करता है।
Note:
Contrast check करें; white पर text-warning पढ़ना मुश्किल है।
उदाहरण: Text colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<p class="text-primary">text-primary</p>
<p class="text-danger-emphasis">text-danger-emphasis</p>
<div class="bg-dark p-2"><span class="text-white">white on dark</span> <span class="text-white text-opacity-50">50% opacity</span></div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- white पर yellow जैसा Low contrast
- जहाँ dark mode support matter करे वहाँ text-muted इस्तेमाल करना
- कई colours mix करना
चैप्टर सारांश
- text-{theme} text colour करता है
- -emphasis variants contrast add करते हैं
- text-white और text-dark contrast fix करते हैं
- text-opacity text soften करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: