ৰং
ৰঙৰ উপযোগিতা শ্ৰেণীৰ মুষ্টিমেয় শ্ৰেণীৰ সৈতে ৰঙৰ জৰিয়তে অৰ্থ প্ৰদান কৰা। হোভাৰ অৱস্থাসমূহৰ সৈতে ষ্টাইলিং সংযোগসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে,ও।
.পাঠ-প্ৰাথমিক
.পাঠ-গৌণ
.পাঠ-সফলতা
.পাঠ-বিপদ
.পাঠ-সতৰ্কবাণী
.পাঠ্য-তথ্য
.পাঠ-পোহৰ
.পাঠ-আন্ধাৰ
.পাঠ-শৰীৰ
.পাঠ-নিস্তব্ধ
.পাঠ-বগা
.পাঠ-ক'লা-৫০
.পাঠ-বগা-৫০
<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-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>যেতিয়া $enable-gradientstrue লে সংহতি কৰা হয়, আপুনি .bg-gradient-সঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰিব পাৰিব। অবিকল্পিতভাৱে, $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শ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।