बूटस्ट्रैप 4 बैज
उदाहरण शीर्षकनया
उदाहरण शीर्षकनया
उदाहरण शीर्षकनया
उदाहरण शीर्षकनया
उदाहरण शीर्षकनया
उदाहरण शीर्षकनया
किसी भी सामग्री में अतिरिक्त जानकारी जोड़ने के लिए बैज का उपयोग किया जाता है।
आयताकार बैज बनाने के लिए तत्वों के भीतर .badgeएक प्रासंगिक वर्ग (जैसे .badge-secondary) के साथ वर्ग का उपयोग करें । <span>ध्यान दें कि मूल तत्व (यदि कोई हो) के आकार से मेल खाने के लिए बैज स्केल:
उदाहरण
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
प्रासंगिक बैज
मुख्य
माध्यमिक
सफलता
खतरा
चेतावनी
जानकारी
रोशनी
अंधेरा
.badge-*बैज का रंग बदलने के लिए किसी भी प्रासंगिक वर्ग ( ) का उपयोग करें :
उदाहरण
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
गोली बैज
मुख्य
माध्यमिक
सफलता
खतरा
चेतावनी
जानकारी
रोशनी
अंधेरा
.badge-pillबैज को और अधिक गोल बनाने के लिए कक्षा का उपयोग करें :
उदाहरण
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
एक तत्व के अंदर बैज
एक बटन के अंदर बैज का उपयोग करने का एक उदाहरण:
उदाहरण
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>