نشانها

اولیه اطلاعات موفقیت ثانویه هشدار خطر تاریک
<span class="badge badge-primary"> اولیه </span>
<span class="badge badge-info"> اطلاعات </span>
<span class="badge badge-success"> موفقیت </span>
<span class="badge badge-secondary"> ثانویه </span>
<span class="badge badge-warning"> هشدار </span>
<span class="badge badge-danger"> خطر </span>
<span class="badge badge-dark"> تاریک </span>
                                            

Outline

اولیه اطلاعات موفقیت ثانویه هشدار خطر تاریک
<span class="badge outline-badge-primary">اولیه</span>
<span class="badge outline-badge-info">اطلاعات</span>
<span class="badge outline-badge-success">موفقیت</span>
<span class="badge outline-badge-secondary">ثانویه</span>
<span class="badge outline-badge-warning">خطا</span>
<span class="badge outline-badge-danger">خطر</span>
<span class="badge outline-badge-dark">تاریک</span>

قرص ها

از کلاس .badge-pills برای قرصها استفاده کنید.

اولیه
اولیه

کلاسیک

از کلاس .badge-classic برای کلاسیک استفاده کنید.

اولیه
اولیه

نشان با عنوان

مقیاس مدالها برای مطابقت با اندازه عنصر والدین فوری با استفاده از واحدهای اندازه فونت نسبی و em.

عنوان مثال اولیه

عنوان مثال موفقیت

عنوان مثال اطلاعات

عنوان مثال خطا

عنوان مثال خطر
عنوان مثال تاریک
<h1>عنوان مثال <span class="badge badge-primary">اولیه</span></h1>
<h2>عنوان مثال <span class="badge badge-success">success</span></h2>
<h3>عنوان مثال <span class="badge badge-info">info</span></h3>
<h4>عنوان مثال <span class="badge badge-warning">warning</span></h4>
<h5>عنوان مثال <span class="badge badge-danger">danger</span></h5>
<h6>عنوان مثال <span class="badge badge-dark">dark</span></h6> 

برچسب ها

<input type="text" id="skill-input"> 

نشان های سفارشی

Person ستون شاپ Person ستون شاپ ×
<button type="button" class="btn btn-primary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> Facebook</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-info position-relative mt-3 mb-3 ml-2">
    <span>Twitter</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-secondary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> </span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-dark mt-3 mb-3 ml-2">
    Notifications <span class="badge badge-light">4</span>
</button>

<span class="badge-chip badge-warning mt-3 mb-3 ml-2 position-relative">
    <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
    <span class="text">مهدی حسینی</span>
</span>

<span class="badge-chip badge-danger mt-3 mb-3 ml-2">
    <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
    <span class="text">مهدی حسینی</span>
    <span class="closebtn pl-2" onclick="this.parentElement.style.display='none'">×
    </span>
</span>