<button class="btn btn-primary text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">اولیه</span>
	</div>
</button>
<button class="btn btn-secondary text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">ثانوی</span>
	</div>
</button>
<button class="btn btn-success text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">موفقیت</span>
	</div>
</button>
<button class="btn btn-danger text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">خطر</span>
	</div>
</button>
<button class="btn btn-warning text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">هشدار</span>
	</div>
</button>
<button class="btn btn-info text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">اطلاعات</span>
	</div>
</button>
<button class="btn btn-light text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">سبک</span>
	</div>
</button>
<button class="btn btn-dark text-white rounded-pill mt-2 ms-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">تاریک</span>
	</div>
</button>

<button class="btn btn-primary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">اولیه</span>
	</div>
</button>
<button class="btn btn-secondary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">ثانوی</span>
	</div>
</button>
<button class="btn btn-success text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">موفقیت</span>
	</div>
</button>
<button class="btn btn-danger text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">خطر</span>
	</div>
</button>
<button class="btn btn-warning text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">هشدار</span>
	</div>
</button>
<button class="btn btn-info text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">اطلاعات</span>
	</div>
</button>
<button class="btn btn-light text-white rounded-pill mt-2 ms-2 px-2">
	<div class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">سبک</span>
	</div>
</button>
<button class="btn btn-dark text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">تاریک</span>
	</div>
</button>

<button class="btn btn-primary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-1.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">اولیه</span>
	</div>
</button>
<button class="btn btn-secondary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-2.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">ثانوی</span>
	</div>
</button>
<button class="btn btn-success text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-3.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">موفقیت</span>
	</div>
</button>
<button class="btn btn-danger text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-4.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">خطر</span>
	</div>
</button>
<button class="btn btn-warning text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-5.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">هشدار</span>
	</div>
</button>
<button class="btn btn-info text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-6.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">اطلاعات</span>
	</div>
</button>
<button class="btn btn-light text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-7.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">سبک</span>
	</div>
</button>
<button class="btn btn-dark text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-8.jpg" class="rounded-circle wh-25" alt="user">
		<span class="ms-1">تاریک</span>
	</div>
</button>

<button class="btn btn-primary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-1.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">اولیه</span>
	</div>
</button>
<button class="btn btn-secondary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-2.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">ثانوی</span>
	</div>
</button>
<button class="btn btn-success text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-3.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">موفقیت</span>
	</div>
</button>
<button class="btn btn-danger text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-4.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">خطر</span>
	</div>
</button>
<button class="btn btn-warning text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-5.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">هشدار</span>
	</div>
</button>
<button class="btn btn-info text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-6.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">اطلاعات</span>
	</div>
</button>
<button class="btn btn-light text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-7.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">سبک</span>
	</div>
</button>
<button class="btn btn-dark text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-8.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">تاریک</span>
	</div>
</button>

<button class="btn btn-primary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-home-4-line text-white"></i>
		<span class="ms-1">اولیه</span>
	</div>
</button>
<button class="btn btn-secondary text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<img src="assets/images/user-2.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
		<span class="ms-1">ثانوی</span>
	</div>
</button>
<button class="btn btn-success text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-check-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">موفقیت</span>
	</div>
</button>
<button class="btn btn-danger text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<i class="ri-close-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
		<span class="ms-1">خطر</span>
	</div>
</button>
<button class="btn btn-warning text-white rounded-pill mt-2 ms-2 px-2">
	<div class="d-flex align-items-center">
		<span class="me-2">هشدار</span>
		<img src="assets/images/user-5.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
	</div>
</button>