BS3 Template

Sample BS3 template (updated 05AU14)

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

        
        
        <!-- SUBNAV -->  
        <div id="subnav" class="navbar navbar-static-top subnav" role="navigation">
	<div class="navbar-inner">
		<div class="container">
		
	        <ul class="pager subnav-pager">
                <div class="col-xs-offset-1 col-xs-2">
                    <i class="fa fa-android fa-lg"></i><br>
                    Sub1
                </div>
                <div class="col-xs-2">
                    <i class="fa fa-android fa-lg"></i><br>
                    Sub2
                </div>
            <div class="col-xs-2">
                <i class="fa fa-android fa-lg"></i><br>
                Sub3
             </div>
        
            <div class="col-xs-2">
              <i class="fa fa-android fa-lg"></i><br>
              Sub4
             </div>
            
              <div class="col-xs-2"><i class="fa fa-android fa-lg"></i><br>Sub5</div>
               



        
        
        
	</ul> <!-- /subnav pager -->	

		</div>	<!-- /container -->		
	</div>  <!-- /navbar-inner -->
</div>  <!-- /subnav -->

    
    
    
    <!--- content to allow page to scroll -->
 <div class="container container-full1200">
      <div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">How we scroll</h1>
    </div>
    <div class="panel-body">
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
    <H1>Scrolling..........</H1>
   ...

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');

body {
    margin: 0;
    padding: 0;
    background-color: #a6a938;
}

.navatar {
width: 30px;
margin: 0px auto;
padding: 0px auto;
}

.logo-nav{
display:block;
width:100%;
text-align: center;
padding: 10px 0px 10px 0px;
}

.navbar-inverse {
margin: 0;
}

.subnav-pager {
margin: 0;
}	

/* NAV VDIVS... */
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}
/* END nav vdivs */



.container-full1200 {
	margin: 0px auto;
	width: auto;
	max-width: 1200px;
}





/* bootstrap 3 helpers for sticky subnav*/
.navbar-form input, .form-inline input {
	width:auto;
}

.navbar {
    margin-bottom:0;
}

.subnav {
   margin: 0px 0px 20px 0px;
  top: 0px;
  z-index: 1020;
  background-color: rgb(247,247,247); 
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #999999;
  padding: 7px 0px 0px 0px;
}
.subnav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}
/* bootstrap 3 helpers for sticky subnav*/

JavaScript

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

$('.subnav').affix({
      offset: {
        top: $('#navtop').height()
      }
});