How to Build a Single-Page Site with Twitter Bootstrap's Navigation Tabs and a Fixed Sidebar

Bootstrap’s tab component can be a bit tricky to set up at first, but it can ultimately prove pretty useful when building things like a multi-section form or photo group. Using this functionality, we’re going to look at how to build a single-page document with tabbed navigation and a fixed sidebar. This can be a good approach to smaller sites with minimal info, compact portfolios, or sectioned resumes. You’ll need to include bootstrap.js for this to work, so make sure jQuery is in place as well.

View Demo | Download Source Files

Here’s how the basic HTML looks. Note the data-toggles and the sections that they link to. For this demo, it is also necessary to place .tab-content in a right-aligned well to avoid overlap with the sidebar when scaling.

<div class="container">
	<div class="row tabbable">
		<div class="span3 fixme">
			<h1>Navigation</h1>
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#blog" data-toggle="tab">Blog Posts</a></li>
				<li><a href="#photos" data-toggle="tab">Photos</a></li>
				<li><a href="#misc" data-toggle="tab">Misc. Components</a></li>
			</ul>
		</div>
		<div class="span8 well pull-right">
			<div class="tab-content">
				<div id="blog" class="tab-pane active">
					<h1>Section 1</h1>
	    			</div>
				<div id="photos" class="tab-pane">
					<h1>Section 2</h1>
				</div>
	    			<div id="misc" class="tab-pane">
	    				<h1>Section 3</h1>
	    			</div>
			</div><!--/.tab-content-->
		</div><!--/.span8-->
	</div><!--/.row-->
</div><!--/.container-->

To make Bootstrap’s tab component work, you’re not limited to a particular layout or grid. However, as exemplified above, you do need to ensure your markup includes a basic hierarchy of:

<div class="tabbable">
    <a href="item1" data-toggle="tab"></a>
    <a href="item2" data-toggle="tab"></a>
    <div class="tab-content">
        <div id="item1" class="tab-pane"></div>
        <div id="item2" class="tab-pane"></div>
    </div>
</div>

Now we can focus on the fixed sidebar. The span3 div also has a class of .fixme. This is what we want to stay in place when scrolling. Minimal CSS is required to make this happen. Most importantly, you’ll want to define a change in position at tablet/mobile resolutions since the fixed attribute is no longer necessary by then.

.fixme { position: fixed; }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.fixme { width: 100%; position: static; }
}

Have a look at the demo, then download the source files and try it out for yourself. We can see with this example that, without much extra markup + styling, Bootstrap can provide a clean and easily workable basis for a single-page design while staying visually organized.