Bootstrap and Tables

by Carlos González

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">
      <table class="red">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1.1</td>
            <td>1.2</td>
          </tr>
          <tr>
            <td>2.1</td>
            <td>2.2</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3">
      <table class="blue">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1.1</td>
            <td>1.2</td>
          </tr>
          <tr>
            <td>2.1</td>
            <td>2.2</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3">
      <table class="green">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1.1</td>
            <td>1.2</td>
          </tr>
          <tr>
            <td>2.1</td>
            <td>2.2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

table {
    width: 100%;
    margin-bottom: 30px;
}

th, td {
    text-align: center;
    padding: 5px 0;
    color: white;
}