<ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">خانه</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">پروفایل</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">مخاطب</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>غیرفعال</button>
	</li>
</ul>
<div class="tab-content" id="myTabContent">
	<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان، محتوای مرتبط با برگه صفحه اصلی است. با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان، محتوای مرتبط با برگه صفحه اصلی است. با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان، محتوای مرتبط با برگه صفحه اصلی است. با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان، محتوای مرتبط با برگه صفحه اصلی است. با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
</div>

<nav>
	<div class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
		<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">خانه</button>
		<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">پروفایل</button>
		<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">تماس با ما</button>
		<button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>غیرفعال</button>
	</div>
</nav>
<div class="tab-content" id="nav-tabContent">
	<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه صفحه اصلی</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
		<p> این برخی از محتوای نگهدارنده مکان است <strong>برگه های پروفایل</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های تماس</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های غیر فعال</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
</div>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">خانه</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">پروفایل</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">تماس با ما</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>غیرفعال</button>
	</li>
</ul>
<div class="tab-content" id="pills-tabContent">
	<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه صفحه اصلی</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های پروفایل</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های تماس</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
	<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
		<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های غیر فعال</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
	</div>
</div>

<div class="d-flex align-items-start">
	<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
		<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">خانه</button>
		<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">پروفایل</button>
		<button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>غیرفعال</button>
		<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">پیام ها</button>
		<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">تنظیمات</button>
	</div>
	<div class="tab-content" id="v-pills-tabContent">
		<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">
			<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه صفحه اصلی</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنید .nav-powered navigation.</p>
		</div>
		<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
			<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های پروفایل</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنیدother .nav-powered navigation.</p>
		</div>
		<div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
			<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه های غیر فعال</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنیدother .nav-powered navigation.</p>
		</div>
		<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
			<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه پیام ها</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنیدother .nav-powered navigation.</p>
		</div>
		<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
			<p>این برخی از محتوای نگهدارنده مکان است <strong>برگه تنظیمات</strong> محتوای مرتبط با کلیک کردن بر روی برگه دیگر، نمایان شدن این یکی برای بعدی تغییر می کند. برگه جاوا اسکریپت کلاس‌ها را برای کنترل نمایان شدن محتوا و سبک‌دهی، تعویض می‌کند. می توانید آن را با زبانه ها، قرص ها و هر چیز دیگری استفاده کنیدother .nav-powered navigation.</p>
		</div>
	</div>
</div>