Bootstrap 5 मेडल

चिह्न

चिह्न (बैज) को सामग्री में अतिरिक्त सूचना जोड़ने के लिए उपयोग किया जाता है:

में <span> तत्व में .badge क्लास और परिप्रेक्ष्य क्लास (जैसे .bg-secondaryआयताकार चिह्न बनाने के लिए)।कृपया ध्यान दें कि चिह्न पैर तत्व के आकार के अनुसार आकार पकड़ता है (अगर हो):

उदाहरण

<h1>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h1>
<h2>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h2>
<h3>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h3>
<h4>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h4>
<h5>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h5>
<h6>उदाहरण शीर्षक <span class="badge bg-secondary">नया</span></h6>

स्वयं प्रयोग करें

परिप्रेक्ष्य चिह्न

किसी भी परिप्रेक्ष्य वर्ग का उपयोग करें (.bg-*) चिह्न का रंग बदलने के लिए:

उदाहरण

<span class="badge bg-primary">मुख्य</span>
<span class="badge bg-secondary">द्वितीयक</span>
<span class="badge bg-success">सफल</span>
<span class="badge bg-danger">खतरा</span>
<span class="badge bg-warning">चेतावनी</span>
<span class="badge bg-info">सूचना</span>
<span class="badge bg-light">हल्का</span>
<span class="badge bg-dark">गहरा</span>

स्वयं प्रयोग करें

कैप्सुल बैज

का उपयोग करें .rounded-pill बैज को गोल बनाने वाली वर्ग:

उदाहरण

<span class="badge rounded-pill bg-primary">मुख्य</span>
<span class="badge rounded-pill bg-secondary">अनुसूचित</span>
<span class="badge rounded-pill bg-success">सफलता</span>
<span class="badge rounded-pill bg-danger">खतरा</span>
<span class="badge rounded-pill bg-warning">चेतावनी</span>
<span class="badge rounded-pill bg-info">सूचना</span>
<span class="badge rounded-pill bg-light">हल्का</span>
<span class="badge rounded-pill bg-dark">गहरा</span>

स्वयं प्रयोग करें

एलिमेंट के अंदर बैज

बटन के अंदर बैज का उदाहरण:

उदाहरण

<button type="button" class="btn btn-primary">
  संदेश <span class="badge bg-danger">4</span>
</button>

स्वयं प्रयोग करें