Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
"First Tab: One" should be visible when the user opens the page.
<br/>
<br/>
<ul class="nav nav-tabs">
    <li class="dropdown active"> <a href="#" id="firstTab" class="dropdown-toggle active" data-toggle="dropdown">First Tab <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="firstTab">
            <li class="active"> <a href="#one" tabindex="-1" data-toggle="tab">One</a>
            </li>
            <li> <a href="#two" tabindex="-1" data-toggle="tab">Two</a>
            </li>
        </ul>
    </li>
    <li class="dropdown"> <a href="#" id="secondTab" class="dropdown-toggle" data-toggle="dropdown">Second Tab <b class="caret"></b></a>

        <ul class="dropdown-menu" role="menu" aria-labelledby="secondTab">
            <li> <a href="#three" tabindex="-1" data-toggle="tab">Three</a>
            </li>
            <li> <a href="#four" tabindex="-1" data-toggle="tab">Four</a>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade" id="one">Selected Tab: One (Should be open/active by default)</div>
    <div class="tab-pane fade" id="two">Selected Tab: Two</div>
    <div class="tab-pane fade" id="three">Selected Tab: Three</div>
    <div class="tab-pane fade" id="four">Selected Tab: Four</div>
</div>

CSS

body {
     margin: 10px;
 }