<ul class="nav nav-tabs nav-justified icon_tabs" role="tablist">
		<li class="nav-item text-center">
			<a class="nav-link active" href="#tab1" role="tab" data-bs-toggle="tab">
				<i class="fa fa-cube"></i>
				<h3>Massage Therapy</h3>
			</a>
		</li>
		<li class="nav-item text-center">
			<a class="nav-link" href="#tab2" role="tab" data-bs-toggle="tab">...</a>
		</li>
		<li class="nav-item text-center">
			<a class="nav-link" href="#tab3" role="tab" data-bs-toggle="tab">...</a>
		</li>
		<li class="nav-item text-center">
			<a class="nav-link" href="#tab4" role="tab" data-bs-toggle="tab">...</a>
		</li>
	</ul>
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane fade show active" id="tab1">
			<div class="row">
				<div class="col-md-5">
					<div class="service_image">
						<img src="..." alt="image">
					</div>
				</div>
				<div class=" col-md-7">
					<div class="tab-content_left styled_list">
						<h3>Massage Therapy</h3>
						<p>
							....
						</p>
						<ul class="tab-content_list">
							<li class="">....</li>
						</ul>
						<a href="#" class="btn btn-primary btn-default">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Border bottom style nav tabs -->
	<ul class="nav nav-tabs bar_tabs" role="tablist">
		<li class="nav-item text-center">
			<a class="nav-link active" href="#tab1" role="tab" data-bs-toggle="tab">
				<i class="fa fa-cube"></i>
				<h3>Massage Therapy</h3>
			</a>
		</li>
	</ul>

						

How to use

Here’s how:

• .icon_tabs used with .nav-tabs for iconic navigation tab menu
• .bar_tabs used with .nav-tabs for Border bottom styled nav tabs shown in example 2

	<!-- nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab">Home</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#messages" role="tab">Messages</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#settings" role="tab">Settings</a>
		</li>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content tab-bordered">
		<div class="tab-pane active" id="home" role="tabpanel">Lorem ipsum dolor sit amet..</div>
		<div class="tab-pane" id="profile" role="tabpanel">Lorem ipsum dolor sit ..</div>
		<div class="tab-pane" id="messages" role="tabpanel">Lorem ipsum dolor si...</div>
		<div class="tab-pane" id="settings" role="tabpanel">Lorem ipsum dolor sit am...</div>
	</div>

	<!-- nav-pills -->
	<ul class="nav nav-tabs nav-pills" role="tablist">

	</ul>

	<!-- Simple tabs without border -->
	<ul class="nav nav-tabs nav-unbordered" role="tablist">

	</ul>

						

How to use

• .nav-tabs for tabs navigation
• .nav-pills with .nav-tabs for filled navigation tabs
• To allow border around the content use .tab-bordered

	<ul class="nav nav-tabs nav-pills nav-justified" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" data-bs-toggle="tab" href="#jutified1" role="tab">jutified1</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#justified2" role="tab">justified2</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#justified3" role="tab">justified3</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-bs-toggle="tab" href="#justified4" role="tab">justified4</a>
		</li>
	</ul>

						

How to use

• . nav-justified class make justified tab menus

	<div class="row ">
		<div class="col-sm-4">
			<ul class="nav nav-tabs nav-stacked">
				<li class="nav-item"><a href="#vtab1" class="nav-link active" data-bs-toggle="tab" aria-expanded="true"> Home</a></li>
				<li class="nav-item"><a href="#vtab2" class="nav-link" data-bs-toggle="tab" aria-expanded="false"> Profile</a></li>
				<li class="nav-item"><a href="#vtab3" class="nav-link" data-bs-toggle="tab"> Contact</a></li>
			</ul>
		</div>
		<div class="tab-content col-sm-8">
			<div class="tab-pane fade active show" id="vtab1" aria-expanded="true">
				<h4>Massage Therapy</h4>
				<p>Lorem ipsum dolor sit amet... </p>
			</div>
			<div class="tab-pane fade" id="vtab2" aria-expanded="false">
				<h4>Massage Therapy</h4>
				<p>Lodistinctio voluptatibus, consequuntur vero neque.</p>
			</div>
			<div class="tab-pane fade" id="vtab3">
				<h4>Massage Therapy</h4>
				<p>Loremquo esse nesciunt.</p>
			</div>
		</div>
	</div>

						

How to use

• Use .nav-stacked with .nav-tabs wrapper to make child elements get the style for vertical tabs