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 mrnobody

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">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<div class="container-fluid header">
  <div class="col-sm-4 header-left">
    <img src="images/header_left.png" alt="">
  </div>

  <div class="col-sm-6 header-center">
    <a class="btn btn-lg btn-success" href="#" role="button">Зарегистрироваться</a>
  </div>

  <div class="col-sm-2 header-right"></div>
</div>

<div class="container wrap-container">
  <!-- Example row of columns -->
  <div class="row text1">
    <div class="col-lg-12">
      <p>«Как не умереть на пути к успеху» - о том, как можно быстро адаптироваться к изменению среды и избежать негативных последствий для физического и ментального здоровья.</p>
      <p>Программа опирается на результаты научных исследований в области нейрофизиологии и эволюционной биологии человека. Практические рекомендации и инструменты адаптированы под требования корпоративной жизни.</p>
    </div>
  </div>

  <div class="row place-date">
    <div class="col-lg-6 date">
      <h1 class="h1">Когда?</h1> left
    </div>

    <div class="col-lg-6 place">
      <h1 class="h1">Место</h1> right
    </div>
  </div>




</div>

</div>
<!-- /container -->

CSS

html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
a,
a img,
p,
ul,
ol,
li,
span,
fieldset,
form,
dl,
dd,
dt,
table,
tr,
td,
img,
input {
  border: none;
  margin: 0;
  outline: none;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font: 18px 'Conv_MyriadPro-Regular', arial, sans-serif;
  color: #000;
}

ul {
  list-style-type: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
}

textarea {
  resize: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  zoom: 1;
}

.clear {
  clear: both;
}

.hide {
  display: none;
}


/*************************************************************************************************************** GLOBAL_layout */

.wrap-container {}


/*************************************************************************************************************** header */

.header {
  background: #a3d8e3;
}

.header-left {
  min-height: 280px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.header-center {
  min-height: 280px;
  font-weight: bold;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.header-right {
  background: #a3d8e3 url('../images/header_right.png') right bottom no-repeat;
  min-height: 280px;
}