Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

تگ ها

  2. کیت‌های رابط کاربری
  3. تگ ها

نشان‌ها

برای ایجاد نشان‌های بیشتر از کلاس کمکی .badge استفاده کنید.

PrimarySecondary SuccessInfoWarningDanger Light Dark
<div class="badge-spacing">
<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-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark">Dark</span>
</div>

Pills - پیل‌ها

برای ایجاد نشان‌های گردتر، از کلاس .rounded-pill استفاده کنید.

Primary Secondary Success InfoWarningDangerLightDark
<div class="badge-spacing">
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-info">Info</span>
<span class="badge rounded-pill badge-warning">Warning</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-light text-dark">Light</span>
<span class="badge rounded-pill badge-dark">Dark</span>
</div>

نشان‌های عددی

با کمک کلاس .badge می‌توانید اعداد را به صورت نشان نمایش دهید.

123 45 678 
<div class="badge-spacing">
<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-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark">Dark</span>
</div>

پیل‌های عددی

با استفاده از کلاس .rounded-circle می‌توانید نشان‌های عددی را به شکل گرد ایجاد کنید.

1 23 4 5678
<div class="badge-spacing">
<a class="badge rounded-circle badge-primary" href="#">1</a>
<a class="badge rounded-circle badge-secondary" href="#">2</a>
<a class="badge rounded-circle badge-success" href="#">3</a>
<a class="badge rounded-circle badge-info" href="#">4</a>
<a class="badge rounded-circle badge-warning" href="#">5</a>
<a class="badge rounded-circle badge-danger" href="#">6</a>
<a class="badge rounded-circle badge-light text-dark" href="#">7</a>
<a class="badge rounded-circle badge-dark" href="#">8</a>
</div>

آیکون با نشان

با استفاده از کلاس .badge می‌توانید آیکون‌ها را همراه با نشان‌ها استفاده کنید. 

<div class="badge-spacing">
<a class="badge badge-primary text-light" href="#">
<i class="fa-light fa-dollar-sign"></i>
</a>
<a class="badge badge-secondary" href="#">
<i class="fa-solid fa-headphones-simple"></i>
</a>
<a class="badge badge-success" href="#">
<i class="fa-solid fa-link"></i>
</a>
<a class="badge badge-info" href="#">
<i class="fa-brands fa-github"></i>
</a>
<a class="badge badge-warning" href="#">
<i class="fa-solid fa-award"></i>
</a>
<a class="badge badge-danger" href="#">
<i class="fa-solid fa-chart-line"></i>
</a>
<a class="badge badge-light text-dark" href="#">
<i class="fa-regular fa-heart"></i>
</a>
<a class="badge badge-dark" href="#">
<i class="fa-regular fa-envelope"></i>
</a>
</div>

آیکون با پیل‌ها

با کمک کلاس .rounded-pill می‌توانید نشان‌های آیکون را به صورت گرد ایجاد کنید.

<div class="badge-spacing">
<a class="badge rounded-circle badge-primary" href="#">
<i class="fa-light fa-dollar-sign"></i>
</a>
<a class="badge rounded-circle badge-secondary" href="#">
<i class="fa-solid fa-headphones-simple"></i>
</a>
<a class="badge rounded-circle badge-success" href="#">
<i class="fa-solid fa-link"></i>
</a>
<a class="badge rounded-circle badge-info" href="#">
<i class="fa-brands fa-github"></i>
</a>
<a class="badge rounded-circle badge-warning" href="#">
<i class="fa-solid fa-award"></i>
</a>
<a class="badge rounded-circle badge-danger" href="#">
<i class="fa-solid fa-chart-line"></i>
</a>
<a class="badge rounded-circle badge-light text-dark" href="#">
<i class="fa-regular fa-heart"></i>
</a>
<a class="badge rounded-circle badge-dark" href="#">
<i class="fa-regular fa-envelope"></i>
</a>
</div>

عنوان‌های نشان

با استفاده از کلاس .badge می‌توانید نشان‌ها را در عناوین HTML از h1 تا h6 قرار دهید.

عنوان نشان 1 جدیدترین

عنوان نشان 2 پرطرفدار

عنوان نشان 3 تسویه

عنوان نشان 4 صندوق ورودی

عنوان نشان 5 ورود
عنوان نشان 6 خروج 
<div class="card-body bage-heading">
<h1 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 1
<span class="badge btn-primary">جدیدترین</span>
</h1>
<h2 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 2
<span class="badge btn-secondary">پرطرفدار</span>
</h2>
<h3 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 3
<span class="badge btn-success">تسویه</span>
</h3>
<h4 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 4
<span class="badge btn-warning">صندوق ورودی</span>
</h4>
<h5 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 5
<span class="badge btn-danger">ورود</span>
</h5>
<h6 class="pb-2 d-flex gap-2 flex-wrap align-items-center">عنوان نشان 6
<span class="badge btn-dark">خروج</span>
</h6>
</div>

نشان‌ها درون دکمه‌ها

اضافه کردن آیکون‌ها به عنوان نشان داخل دکمه با کمک کلاس .btn.

<div class="badge-spacing flex-column align-items-start">
<button class="btn btn-primary d-flex align-items-center" type="button">پیام‌ها
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-regular fa-envelope"></i>
</span>
</button>
<button class="btn btn-secondary d-flex align-items-center" type="button">اعلان‌ها
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-regular fa-bell"></i>
</span>
</button>
<button class="btn btn-success d-flex align-items-center" type="button">به‌روزرسانی موجود
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-solid fa-gear"></i>
</span>
</button>
<button class="btn btn-info d-flex align-items-center text-light" type="button">در حال پخش
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-solid fa-music"></i>
</span>
</button>
</div>