Badges क्या हैं
Badges counts, statuses, या highlights के लिए छोटे labels हैं।
In this page:
Syntax
<span class="badge text-bg-primary">Label</span>
<span class="badge rounded-pill text-bg-danger">Label</span>Badges
एक छोटा label बनाने के लिए .text-bg-{color} के साथ .badge इस्तेमाल करें; pill shape के लिए .rounded-pill add करें। Badges parent heading या button font size के हिसाब से scale होते हैं, और position utilities से दूसरे elements पर position किए जा सकते हैं।
Context के लिए visually hidden text add करें।
Note:
एक .visually-hidden span add करें ताकि screen readers जानें number का मतलब क्या है।
उदाहरण: Badges
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<h4>Inbox <span class="badge text-bg-secondary">4</span></h4>
<button class="btn btn-primary position-relative">Messages
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+<span class="visually-hidden">unread messages</span></span>
</button>
<span class="badge text-bg-success ms-3">New</span>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Status दिखाने के लिए सिर्फ colour इस्तेमाल करना
- बिना markup के badges को buttons की तरह इस्तेमाल करना
- Context text missing होना
चैप्टर सारांश
- text-bg-* के साथ badge
- pills के लिए rounded-pill
- Parent font size के हिसाब से scale
- Hidden context text add करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: