Bootstrap 3 Template

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

by Lalji Tadhani

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">
<div class="wrapper">
  <div id="navigation">
    <div class="navbar-static-top">
      <div class="header">
      </div>
      <div id="PanelNav">
        <div class="container" data-toggle="clingify">
          <div class="navbar">
            Some Nav
          </div>
        </div>
      </div>
    </div>
  </div>

  <main>
   
   <div class="bg-wrapper">
      <div class="bg-layer"></div>
      <header id="page-title">
        <div class="container">
          About Us </div>
      </header>
    </div>
    
    <div class="container">
      <div class="row">
        <h2>
          Some Content Notice Overlay layer ontop
        </h2>
      </div>
    </div>
    
  </main>
</div>

CSS

/* Optional theme */

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

#page-title {
  font-size: 2.2em;
  color: #415262;
  padding: 20px 40px;
  margin-bottom: 40px;
}

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index:1001;
}

.bg-wrapper {
  background-image: url(https://lasereyedev.wpengine.com/wp-content/themes/optico/images/titlebar-bg.jpg);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

header#page-title {
  background: transparent;
}

JavaScript

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