Navs Justified in Bootstrap

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>

<body>
	<div class="container">
		<div id="content">
			<ul id="tabs" class="nav nav-tabs nav-justified" data-tabs="tabs">
				<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
				<li><a href="#orange" data-toggle="tab">Orange</a></li>
				<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
				<li><a href="#green" data-toggle="tab">Green</a></li>
				<li><a href="#blue" data-toggle="tab">Blue</a></li>
			</ul>
			<div id="my-tab-content" class="tab-content">
				<div class="tab-pane active" id="red">
					<h1>Red</h1>
					<p>red red red red red red</p>
				</div>
				<div class="tab-pane" id="orange">
					<h1>Orange</h1>
					<p>orange orange orange orange orange</p>
				</div>
				<div class="tab-pane" id="yellow">
					<h1>Yellow</h1>
					<p>yellow yellow yellow yellow yellow</p>
				</div>
				<div class="tab-pane" id="green">
					<h1>Green</h1>
					<p>green green green green green</p>
				</div>
				<div class="tab-pane" id="blue">
					<h1>Blue</h1>
					<p>blue blue blue blue blue</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Output

Untitled

Share

You may also like...