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://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="row">
  
	<input id="sidebar-toggle" type="checkbox" name="sidebar-toggle" class="sidebar-toggle sidebar-transition" checked />
	<label for="sidebar-toggle" id="sidebar-toggle-label" class="sidebar-toggle-label fa sidebar-icon bigger-170 sidebar-transition"></label>
	
	<div id="SideBar" class="SideBar sidebar-transition">
		<div class="row" id="AjaxRow">
			<div class="col-md-12">
				<div class="row">
					<div class="panel panel-primary">
						<a data-toggle="collapse" data-parent="#Ajax-heading" href="#Ajax-body" aria-expanded="false" aria-controls="Ajax-body" class="section-header">
							<div class="panel-custom panel-heading" role="tab" id="Ajax-heading">
								<div class="panel-title font14px">
									Sidebar
									<div class="pull-right"><i id="iAjaxImgSwap" class="fa accordion-icon"></i></div>
								</div>
							</div>
						</a>

						<div class="row">
							<div class="col-md-12">
								<div id="Ajax-body" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="Ajax-heading">
									<div class="panel-body">
										<div class="form-group">

											<div class="row" style="margin-top: 10px">
												<div id="ajaxPaneHtml" class="col-md-12">
													<div class="row">
														<div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: green"></div>
														<div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: red"></div>
														<div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: blue"></div>
														<div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color:...

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');
.sidebar-transition {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .50s ease-in-out;
  -moz-transition: .50s ease-in-out;
  -o-transition: .50s ease-in-out;
  transition: .50s ease-in-out;
  -webkit-text-size-adjust: none;
}

.MainWindow {
  width: calc(100% - 15px);
  margin-left: 15px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.SideBar {
  position: fixed;
  top: 0;
  left: -300px;
  height: 100%;
  width: 295px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
}

.sidebar-toggle {
  position: absolute;
  opacity: 0;
}

.sidebar-toggle-label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: auto;
  width: auto;
  display: block;
  position: fixed;
  left: 5px;
  top: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, .0);
  z-index: 1;
}

.sidebar-icon:before {
  content: "\f138";
}

.sidebar-toggle:checked ~ .sidebar-icon:before {
  content: "\f137";
}

.sidebar-toggle:checked ~ .sidebar-toggle-label {
  left: 292px;
}

.sidebar-toggle:checked ~ .SideBar {
  left: 0px;
}

.sidebar-toggle:checked ~ .MainWindow {
  margin-left: 300px;
  width: calc(100% - 300px);
}