वर्णाः
मुष्टिभ्यां वर्णोपयोगितावर्गैः सह वर्णद्वारा अर्थं प्रसारयन्तु। होवर स्टेट्स् इत्यनेन सह स्टाइलिंग् लिङ्क्स् इत्यस्य समर्थनम् अपि अन्तर्भवति ।
.पाठ-प्राथमिक
.पाठ-माध्यमिकम्
.पाठ-सफलता
.पाठ-संकटः
.पाठ-चेतावनी
.पाठ-सूचना
.पाठ-प्रकाशः
.पाठ-अन्धकारः
.पाठ-निःशब्दः
.पाठ-शुक्लः
<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-whiteand .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>सन्दर्भपाठवर्णवर्गाणां सदृशं, कस्यचित् तत्त्वस्य पृष्ठभूमिं कस्यापि सन्दर्भवर्गस्य कृते सहजतया सेट् कुर्वन्तु । Anchor घटकाः hover इत्यत्र अन्धकारं करिष्यन्ति, यथा text classes । Background utilities do not setcolor , अतः केषुचित् सन्दर्भेषु भवान् .text-*utilities इत्यस्य उपयोगं कर्तुम् इच्छति ।
<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-gradientstrue इति सेट् भवति तदा भवन्तः .bg-gradient-utility classes इत्यस्य उपयोगं कर्तुं शक्नुवन्ति । पूर्वनिर्धारितरूपेण, $enable-gradientsअक्षमम् अस्ति तथा च अधोलिखितं उदाहरणं इच्छया भग्नम् अस्ति । एतत् भवता Bootstrap इत्यस्य उपयोगं आरभ्यत इति क्षणात् आरभ्य सुलभतया अनुकूलनार्थं क्रियते । एतानि वर्गाणि अधिकं च सक्षमीकरणाय अस्माकं Sass विकल्पानां विषये ज्ञातव्यम् ।
<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वर्गेण सह निगूढः अतिरिक्तपाठः इति सुनिश्चितं कुर्वन्तु