Bootstrap 3.0 - Grid System

by Austin Anderson

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class='row'>
    <div class="col-sm-3">
      <div class="red">1</div>
    </div>
    <div class="col-sm-3">
      <div class="blue">2</div>
    </div>
    <div class="col-sm-3">
      <div class="green">3</div>
    </div>
    <div class="col-sm-3">
      <div class="orange">4</div>
    </div>
  </div>
</div>

CSS

body {
  background: lightgray;
}
.row {
  background: gray;
}
.row > div > div {
  margin: 10px;
  font-size: 20px;
  text-align: center;
  color: white;
  font-weight: bold;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: limegreen;
}

.orange {
  background: orange;
}