रंग-बिरंग के बा
मुट्ठी भर रंग उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित करीं। होवर स्टेट के साथ स्टाइल लिंक खातिर समर्थन भी शामिल बा।
.पाठ-प्राथमिक के बा
.पाठ-माध्यमिक के बा
.पाठ-सफलता के बा
.पाठ-खतरा के बा
.पाठ-चेतावनी के बा
.पाठ-जानकारी बा
.पाठ-प्रकाश के बा
.पाठ-अंधेरा बा
.पाठ-म्यूट कइल गइल बा
.पाठ-सफेद के बा
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
संदर्भ पाठ कक्षा सभ भी दिहल गइल होवर आ फोकस स्टेट सभ के साथ एंकर सभ पर बढ़िया काम करे लीं। ध्यान रहे कि .text-white
आ .text-muted
क्लास में कवनो लिंक स्टाइलिंग नइखे.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
संदर्भ पाठ रंग वर्ग सभ के समान, आसानी से कौनों तत्व के पृष्ठभूमि के कौनों भी संदर्भ वर्ग पर सेट करीं। एंकर घटक होवर पर गहिराह हो जाई, ठीक ओइसहीं जइसे टेक्स्ट क्लास. बैकग्राउंड यूटिलिटीज सेट ना करेलाcolor
, एहसे कुछ मामिला में रउरा .text-*
यूटिलिटीज के इस्तेमाल कइल चाहब.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
जब $enable-gradients
सही पर सेट कइल जाला, त रउआँ .bg-gradient-
उपयोगिता वर्ग सभ के इस्तेमाल कर सकीले। डिफ़ॉल्ट रूप से, $enable-gradients
अक्षम बा आ नीचे दिहल उदाहरण जानबूझ के तोड़ दिहल गइल बा। ई तब से आसान कस्टमाइजेशन खातिर कइल जाला जब से रउआ बूटस्ट्रैप के इस्तेमाल शुरू करीं। एह कक्षा सभ के सक्षम करे खातिर हमनी के सास विकल्प सभ के बारे में जानीं आ अउरी बहुत कुछ।
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
विशिष्टता से निपटे के बा
कई बेर दोसरा चयनकर्ता के विशिष्टता के कारण संदर्भ वर्ग लागू ना कइल जा सके ला। <div>
कुछ मामिला में, एगो पर्याप्त वर्कअराउंड ई होला कि अपना तत्व के सामग्री के क्लास के साथ a में लपेटल जाय ।
सहायक प्रौद्योगिकी के अर्थ संप्रेषित कइल
अर्थ जोड़े खातिर रंग के इस्तेमाल से खाली एगो दृश्य संकेत मिलेला, जवन सहायक तकनीक के प्रयोगकर्ता लोग के ना पहुँचावल जाई – जइसे कि स्क्रीन रीडर। सुनिश्चित करीं कि रंग से चिन्हित जानकारी या त खुद सामग्री से स्पष्ट होखे (जइसे कि दृश्यमान पाठ), या फिर वैकल्पिक तरीका से शामिल कइल गइल होखे, जइसे कि .sr-only
क्लास के साथ छिपल अतिरिक्त पाठ।