نشان (Badge)

نشان
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge bg-primary">Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-warning">Warning</span>
    <span class="badge bg-info">Info</span>
    <span class="badge bg-light text-dark">Light</span>
    <span class="badge bg-dark text-white">Dark</span>
نشان روشن
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge bg-primary-transparent">Primary</span>
    <span class="badge bg-secondary-transparent">Secondary</span>
    <span class="badge bg-success-transparent">Success</span>
    <span class="badge bg-danger-transparent">Danger</span>
    <span class="badge bg-warning-transparent">Warning</span>
    <span class="badge bg-info-transparent">Info</span>
    <span class="badge bg-light-transparent text-dark">Light</span>
    <span class="badge bg-dark-transparent">Dark</span>
نشان قرص
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge rounded-pill bg-primary">Primary</span>
    <span class="badge rounded-pill bg-secondary">Secondary</span>
    <span class="badge rounded-pill bg-success">Success</span>
    <span class="badge rounded-pill bg-danger">Danger</span>
    <span class="badge rounded-pill bg-warning">Warning</span>
    <span class="badge rounded-pill bg-info">Info</span>
    <span class="badge rounded-pill bg-light text-dark">Light</span>
    <span class="badge rounded-pill bg-dark text-white">Dark</span>
نشان قرص لایت
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge rounded-pill bg-primary-transparent">Primary</span>
    <span class="badge rounded-pill bg-secondary-transparent">Secondary</span>
    <span class="badge rounded-pill bg-success-transparent">Success</span>
    <span class="badge rounded-pill bg-danger-transparent">Danger</span>
    <span class="badge rounded-pill bg-warning-transparent">Warning</span>
    <span class="badge rounded-pill bg-info-transparent">Info</span>
    <span class="badge rounded-pill bg-light-transparent text-dark">Light</span>
    <span class="badge rounded-pill bg-dark-transparent">Dark</span>
نشان با گرادینت
Primary Secondary Success Danger Warning Info orange purple 
<span class="badge bg-primary-gradient">Primary</span>
    <span class="badge bg-secondary-gradient">Secondary</span>
    <span class="badge bg-success-gradient">Success</span>
    <span class="badge bg-danger-gradient">Danger</span>
    <span class="badge bg-warning-gradient">Warning</span>
    <span class="badge bg-info-gradient">Info</span>
    <span class="badge bg-orange-gradient">orange</span>
    <span class="badge bg-purple-gradient">purple</span>
نشان با گرادینت به شکل قرص (Pill)
Primary Secondary Success Danger Warning Info orange purple 
<span class="badge bg-primary-gradient">Primary</span>
    <span class="badge bg-secondary-gradient">Secondary</span>
    <span class="badge bg-success-gradient">Success</span>
    <span class="badge bg-danger-gradient">Danger</span>
    <span class="badge bg-warning-gradient">Warning</span>
    <span class="badge bg-info-gradient">Info</span>
    <span class="badge bg-orange-gradient">orange</span>
    <span class="badge bg-purple-gradient">purple</span>
نشان با حاشیه (Outline)
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge bg-outline-primary">Primary</span>
    <span class="badge bg-outline-secondary">Secondary</span>
    <span class="badge bg-outline-success">Success</span>
    <span class="badge bg-outline-danger">Danger</span>
    <span class="badge bg-outline-warning">Warning</span>
    <span class="badge bg-outline-info">Info</span>
    <span class="badge bg-outline-light text-dark">Light</span>
    <span class="badge bg-outline-dark">Dark</span>
نشان بیضی با حاشیه (Outline Pill)
Primary Secondary Success Danger Warning Info Light Dark 
<span class="badge rounded-pill bg-outline-primary">Primary</span>
    <span class="badge rounded-pill bg-outline-secondary">Secondary</span>
    <span class="badge rounded-pill bg-outline-success">Success</span>
    <span class="badge rounded-pill bg-outline-danger">Danger</span>
    <span class="badge rounded-pill bg-outline-warning">Warning</span>
    <span class="badge rounded-pill bg-outline-info">Info</span>
    <span class="badge rounded-pill bg-outline-light text-dark">Light</span>
    <span class="badge rounded-pill bg-outline-dark">Dark</span>
دکمه‌ها همراه با نشان (Badge) 
<button type="button" class="btn btn-primary my-1 me-2">
        اطلاعیه ها<span class="badge ms-2 bg-secondary">4</span>
    </button>
    <button type="button" class="btn btn-secondary my-1 me-2">
        اطلاعیه ها<span class="badge ms-2 bg-primary">7</span>
    </button>
    <button type="button" class="btn btn-success my-1 me-2">
        اطلاعیه ها<span class="badge ms-2 bg-danger">12</span>
    </button>
    <button type="button" class="btn btn-info my-1 me-2">
        اطلاعیه ها<span class="badge ms-2 bg-warning">32</span>
    </button>
دکمه با نشان (Badge) بدون پس‌زمینه 
<button type="button" class="btn btn-outline-primary my-1 me-2">
        اطلاعیه ها<span class="badge ms-2">4</span>
    </button>
    <button type="button" class="btn btn-outline-secondary my-1 me-2">
        اطلاعیه ها<span class="badge ms-2">7</span>
    </button>
    <button type="button" class="btn btn-outline-success my-1 me-2">
        اطلاعیه ها<span class="badge ms-2">12</span>
    </button>
    <button type="button" class="btn btn-outline-info my-1 me-2">
        اطلاعیه ها<span class="badge ms-2">32</span>
    </button>
برچسب‌های موقعیتی
img img img ۱۰۰۰+ 
<button type="button" class="btn btn-primary position-relative">
        صندوق ورودی
        <span
            class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
            ۹۹+
            <span class="visually-hidden">پیام‌های خوانده‌نشده</span>
        </span>
    </button>
    <button type="button" class="btn btn-secondary position-relative">
        پروفایل
        <span
            class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
            <span class="visually-hidden">اعلان جدید</span>
        </span>
    </button>
    <span class="avatar">
        <img src="/assets/images/faces/2.jpg" alt="img">
        <span
        class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
        <span class="visually-hidden">اعلان جدید</span>
        </span>
    </span>
    <span class="avatar avatar-rounded">
        <img src="/assets/images/faces/15.jpg" alt="img">
        <span class="position-absolute top-80 start-100 translate-middle p-1 bg-success border border-light              rounded-circle">
            <span class="visually-hidden">اعلان جدید</span>
        </span>
    </span>
    <span class="avatar avatar-rounded">
        <img src="/assets/images/faces/10.jpg" alt="img">
        <span class="position-absolute top-0 start-100 translate-middle badge bg-secondary rounded-pill shadow-lg">۱۰۰۰+
            <span class="visually-hidden">اعلان جدید</span>
        </span>
    </span>
نشان سفارشی
داغ
14
13.2k
صندوق ورودی 32 
<span class="badge bg-outline-secondary custom-badge fs-15 d-inline-flex align-items-center"><i class="ti ti-flame me-1"></i>Hot</span>
    <span class="icon-badge">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        <span class="badge rounded-pill bg-success">14</span>
    </span>
    <span class="badge border bg-light text-default custom-badge"><i class="fe fe-eye me-2 d-inline-block"></i>13.2k</span>
    <span class="text-badge">
        <span class="text fs-18">Inbox</span>
        <span class="badge rounded-pill bg-success">32</span>
    </span>
عناوین

عنوان مثال جدید

عنوان مثال جدید

عنوان مثال جدید

عنوان مثال جدید

عنوان مثال جدید
عنوان مثال جدید
<h1>عنوان مثال <span class="badge bg-primary">جدید</span></h1>
    <h2>عنوان مثال <span class="badge bg-primary">جدید</span></h2>
    <h3>عنوان مثال <span class="badge bg-primary">جدید</span></h3>
    <h4>عنوان مثال <span class="badge bg-primary">جدید</span></h4>
    <h5>عنوان مثال <span class="badge bg-primary">جدید</span></h5>
    <h6>عنوان مثال <span class="badge bg-primary">جدید</span></h6>