<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<h1>Responsive CSS Tabs</h1>
<div class="tab_container">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-code"></i><span>Code</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>About</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Services</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-folder-open-o"></i><span>Portfolio</span></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><i class="fa fa-envelope-o"></i><span>Contact</span></label>
<section id="content1" class="tab-content">
<h3>Headline 1</h3>
<p>Tab 1 Content.</p>
</section>
<section id="content2" class="tab-content">
<h3>Headline 2</h3>
<p>Tab 2 content.</p>
</section>
<section id="content3" class="tab-content">
<h3>Headline 3</h3>
<p>Tab 3 content</p>
</section>