نشان‌های پیشفرض بوت استرپ
اولیه ثانویه موفقیت اخطار خطر اطلاعات روشن تیره
<span class="badge badge-primary">اولیه</span>
<span class="badge badge-secondary">ثانویه</span>
<span class="badge badge-success">موفقیت</span>
<span class="badge badge-danger">اخطار</span>
<span class="badge badge-warning">خطر</span>
<span class="badge badge-info">اطلاعات</span>
<span class="badge badge-light text-body">روشن</span>
<span class="badge badge-dark">تیره</span>
span.badge.bg-primary.text-white.me-2 اولیه
span.badge.bg-secondary.text-white.me-2 ثانویه
span.badge.bg-success.me-2 موفقیت
span.badge.bg-danger.me-2 اخطار
span.badge.bg-warning.me-2 خطر
span.badge.bg-info.me-2 اطلاعات
span.badge.bg-light.text-body.me-2 روشن
span.badge.bg-dark.me-2 تیره
به طور پیش فرض، Bootstrap شامل نشان های بالا می باشد. استایل این نشان‌های پیش‌فرض برای تناسب با موضوع SB Admin Pro اصلاح شده است.
نشان های توسعه داده شده
قرمز نارنجی زرذ سبز سبز روشن فیروزه ای آبی نیلی آبی بنفش صورتی
<span class="badge badge-red">قرمز</span>
<span class="badge badge-orange">نارنجی</span>
<span class="badge badge-yellow">زرد</span>
<span class="badge badge-green">سبز</span>
<span class="badge badge-teal">سبز روشن</span>
<span class="badge badge-cyan">فیروزه ای</span>
<span class="badge badge-blue">آبی</span>
<span class="badge badge-indigo">نیلی آبی</span>
<span class="badge badge-purple">بنفش</span>
<span class="badge badge-pink">صورتی</span>
span.badge.bg-red قرمز
span.badge.bg-orange نارنجی
span.badge.bg-yellow زرذ
span.badge.bg-green سبز
span.badge.bg-teal سبز روشن
span.badge.bg-cyan فیروزه ای
span.badge.bg-blue آبی
span.badge.bg-indigo نیلی آبی
span.badge.bg-purple بنفش
span.badge.bg-pink صورتی
سبک های نشان غیر متنی بالا به صورت سفارشی برای تم SB Admin Pro ساخته شده اند!
اندازه نشان‌ها

سرتیتر نمونه جدید

سرتیتر نمونه جدید

سرتیتر نمونه جدید

سرتیتر نمونه جدید

سرتیتر نمونه جدید
سرتیتر نمونه جدید

این یک پاراگراف میباشد که نشان در آخر جمله قرار گرفته است! جدید

<h1>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h1>
<h2>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h2>
<h3>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h3>
<h4>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h4>
<h5>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h5>
<h6>سرتیتر نمونه <span class="badge badge-primary">جدید</span></h6>

<p>این یک پاراگراف میباشد که نشان در آخر جمله قرار گرفته است! <span class="badge badge-primary">جدید</span></p>

<button class="btn btn-primary">پیغام‌ها <span class="badge bg-white text-dark">5</span></button>

<button class="btn btn-secondary">اعلان‌ها <span class="badge bg-white text-dark">3</span></button>

<button class="btn btn-warning">هشدارها <span class="badge bg-white text-dark">7</span></button>
h1 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
h2 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
h3 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
h4 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
h5 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
h6 سرتیتر نمونه
    span.badge.bg-primary.text-white.ms-2 جدید
p This is an example paragraph with a badge at the end!
    span.badge.bg-primary.text-white.ms-2 جدید
button.btn.btn-primary.me-2 Messages
    span.badge.bg-white.text-dark.ms-2 5
button.btn.btn-secondary.me-2 Notifications
    span.badge.bg-white.text-dark.ms-2 3
button.btn.btn-warning Alerts
    span.badge.bg-white.text-dark.ms-2 7
اندازه نشان با استفاده از واحدهای em تنظیم می شود، به این معنی که آنها با اندازه فونت والد فوری خود سازگار می شوند. مثال‌های بالا نشان می‌دهند که اندازه نشان مطابق با والد است، از جمله نشان استفاده شده در المان دکمه.