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

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

  <h6>نشان راست تراز</h6>
<div class="row gap-2">
    <div class="col-md-5">
        <button class="btn d-flex bg-primary-subtle w-100 d-block text-primary" type="button">اصلی<span class="badge ms-auto text-bg-primary">1</span>
        </button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-info-subtle w-100 d-block text-info" type="button">اطلاعات<span class="badge ms-auto text-bg-info">2</span>
        </button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-warning-subtle w-100 d-block text-warning" type="button">هشدار<span class="badge ms-auto text-bg-warning">3</span>
        </button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-danger-subtle w-100 d-block text-danger" type="button">خطر<span class="badge ms-auto text-bg-danger">4</span>
        </button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-success-subtle w-100 d-block text-success" type="button">موفقیت<span class="badge ms-auto text-bg-success">5</span>
        </button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-secondary-subtle w-100 d-block text-secondary" type="button">ثانی<span class="badge ms-auto text-bg-secondary">6</span>
        </button>
    </div>
</div>
<h6 class="mt-3">نشان سمت چپ</h6>
<div class="row gap-2 mt-2">
    <div class="col-md-5">
        <button class="btn d-flex bg-primary-subtle w-100 d-block text-primary" type="button">
            <span class="badge me-auto text-bg-primary">1</span>اصلی</button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-info-subtle w-100 d-block text-info" type="button">
            <span class="badge me-auto text-bg-info">2</span>اطلاعات</button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-warning-subtle w-100 d-block text-warning" type="button">
            <span class="badge me-auto text-bg-warning">3</span>هشدار</button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-danger-subtle w-100 d-block text-danger" type="button">
            <span class="badge me-auto text-bg-danger">4</span>خطر</button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-success-subtle w-100 d-block text-success" type="button">
            <span class="badge me-auto text-bg-success">5</span>موفقیت</button>
    </div>
    <div class="col-md-5">
        <button class="btn d-flex bg-secondary-subtle w-100 d-block text-secondary" type="button">
            <span class="badge me-auto text-bg-secondary">6</span>ثانی</button>
    </div>
</div>
  

  <h6>با پس زمینه جامد</h6>
<span class="mb-1 badge text-bg-primary">اولیه</span>
<span class="mb-1 badge text-bg-secondary">ثانویه</span>
<span class="mb-1 badge text-bg-success">موفقیت</span>
<span class="mb-1 badge text-bg-danger">خطر</span>
<span class="mb-1 badge text-bg-warning">هشدار</span>
<span class="mb-1 badge text-bg-info">خبر</span>
<span class="mb-1 badge text-bg-light">روشن</span>
<span class="mb-1 badge text-bg-dark">تیره</span>

<h6 class="mt-3 pt-3 mt-4">با پس زمینه سبک</h6>
<span class="mb-1 badge bg-primary-subtle text-primary">اولیه</span>
<span class="mb-1 badge bg-secondary-subtle text-secondary">ثانویه</span>
<span class="mb-1 badge bg-success-subtle text-success">موفقیت</span>
<span class="mb-1 badge bg-danger-subtle text-danger">خطر</span>
<span class="mb-1 badge bg-warning-subtle text-warning">هشدار</span>
<span class="mb-1 badge bg-info-subtle text-info">خبر</span>
  

  <h6>با پس زمینه جامد</h6>
<span class="mb-1 badge rounded-pill text-bg-primary">اولیه</span>
<span class="mb-1 badge rounded-pill text-bg-secondary">ثانویه</span>
<span class="mb-1 badge rounded-pill text-bg-success">موفقیت</span>
<span class="mb-1 badge rounded-pill text-bg-danger">خطر</span>
<span class="mb-1 badge rounded-pill text-bg-warning">هشدار</span>
<span class="mb-1 badge rounded-pill text-bg-info">خبر</span>
<span class="mb-1 badge rounded-pill text-bg-light">روشن</span>
<span class="mb-1 badge rounded-pill text-bg-dark">تیره</span>

<h6 class="mt-3 pt-3 mt-4">با پس زمینه سبک</h6>
<span class="mb-1 badge rounded-pill bg-primary-subtle text-primary">اولیه</span>
<span class="mb-1 badge rounded-pill bg-secondary-subtle text-secondary">ثانویه</span>
<span class="mb-1 badge rounded-pill bg-success-subtle text-success">موفقیت</span>
<span class="mb-1 badge rounded-pill bg-danger-subtle text-danger">خطر</span>
<span class="mb-1 badge rounded-pill bg-warning-subtle text-warning">هشدار</span>
<span class="mb-1 badge rounded-pill bg-info-subtle text-info">خبر</span>