Bootstrap grid examples

Bootstrap grid system.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div class="container text-center">    
<div class="row">
        <div class="col-xs-6 col-sm-3">
          .col-xs-6 .col-sm-3
          Resize your viewport or check it out on your phone for an example.
          Resize your viewport or check it out on your phone for an example.
          Resize your viewport or check it out on your phone for an example.
          Resize your viewport or check it out on your phone for an example.
          Resize your viewport or check it out on your phone for an example.
        </div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

      <div class="row"></div>

        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      </div>
</div>

CSS

body { padding: 20px; }
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 { margin-bottom: 30px; }

.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
  font-size: 11px;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}