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.


<!DOCTYPE html>
<html lang="en">
<link href="css/bootstrap.css" rel="stylesheet">
<script	src=""></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

	<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>
			<div id="my-tab-content" class="tab-content">
				<div class="tab-pane active" id="red">
					<p>red red red red red red</p>
				<div class="tab-pane" id="orange">
					<p>orange orange orange orange orange</p>
				<div class="tab-pane" id="yellow">
					<p>yellow yellow yellow yellow yellow</p>
				<div class="tab-pane" id="green">
					<p>green green green green green</p>
				<div class="tab-pane" id="blue">
					<p>blue blue blue blue blue</p>




You may also like...