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">
        <header class="header">
                <nav class="vnavbar" role="navigation">
<ul class="tabs  primary-nav">
    
    <li class="tabs__item">
        <a href="#" class="tabs__link">Content</a>
    </li>

    <li class="tabs__item">
        <a href="#" class="tabs__link">Search</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Profile</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Homer</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Store</a>
    </li>
    
      <li class="tabs__item">
        <a href="#" class="tabs__link">Mail</a>
    </li>
    
    
    
              <li class="dropdown tabs__item">
              
                     
            <a href="#" class="dropdown-toggle tabs__link" dropdown-toggle="" data-toggle="dropdown">Me <b class="caret"></b>   
            </a>
              
            <ul class="dropdown-menu" role="menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li>
                <a href="#">Separated link</a>
              </li>
            </ul>
          </li>
    
</ul>

          </nav>            
      <!-- /.navbar-collapse -->    
	</header>
  <body class="bodyh">hhhhhhhhhhhhhhhhhhhhhh</body>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.bodyh {height:100%; background-color:blue;}

.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}

    .tabs__item {
        display: table-cell; /* [4] */
    }

        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;  height:48px; position: relative;
    overflow: hidden; background:#333 !important; border-radius: 0 !important; /* [1] */
}

        .primary-nav a {
            padding: 1em;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .primary-nav a:hover {
            background-color: #666;
        }
        
.primary-nav a.active {
  border-bottom: 4px solid #f90;  color: #f90;   padding:1em; 
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

$('.vnavbar ul li a').click(function() {
    $('active').removeClass();
    
    $(this).addClass('active a');
});