commons of bootrap. ref: http://getbootstrap.com/css/

bootstrap.md

• classes, tags have margin-bottom: p, .form-group

p {
margin-bottom: 10px;
}

.form-group {
margin-bottom: 15px;
}

• classes make center: center-block, text-center

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.text-center {
  text-align: center;
}

• classes add color: text-muted, text-primary, text-success, text-info, text-warning, text-danger. ref: http://getbootstrap.com/css/#helper-classes-colors

common-structure.html

<div class="container">
  <!-- row -->
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
  <!-- row -->
  <div class="row">
    <div class="col-md-4 col-md-offset-4"></div>
    <div class="col-md-4"></div>
  </div>
  
  <!-- form -->
  <form>
    <div class="form-group">
        <label for="email">email</label>
        <input name="email" id="email" type="email" class="form-control">
    </div>
  </form>
</div>

media-query.css

/* Extra small devices Phones (<768px); .col-xs- */
@media (max-width: 767px) {
}

/* Small devices Tablets (≥768px); .col-sm- */
@media (min-width: 768px) {
}

/* Medium devices Desktops (≥992px); .col-md- */
@media (min-width: 992px) {
}

/* Large devices Desktops (≥1200px); .col-lg- */
@media (min-width: 1200) {
}