<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Main Tabs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>