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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.da.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="col-md-4">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav pull-left">
<li><a href="#">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</a></li>
</ul>
</div>
<div class="col-md-4 form-header">
<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
</form>
</div>
<div class="col-md-4">
<ul class="nav navbar-nav pull-right">
<li><a href="#">
<span class="glyphicon glyphicon-list" aria-hidden="true"></span>
</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
</a></li>
</ul>
</div>
</nav>
</header>
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');
header {
background-color: #194969;
border: 0;
}
.navbar {
margin: 0 !important;
padding: 0 !important;
height: 3em !important;
border: 0 !important;
border-radius: 0 !important;
background-color: inherit !important;
}
.navbar .navbar-form {
margin-top: 0.75em !important;
}
.navbar > a {
color: #eee !important;
}
.navbar li > a {
margin: 0 !important;
background-color: #194969;
color: #eee !important;
width: 4em;
text-align: center;
}
.navbar li > a:hover {
border-radius: 0 0 0 0 !important;
margin: 0 !important;
color: #194969 !important;
background-color: #eee !important;
height: auto !important;
}
#navbar-search-button {
color: #194969;
}
.form-header{
text-align: center;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */