SDJ SDJ - 6 months ago 65
HTML Question

Can you add a background color to a table in bootstrap with built in classes?

In is there any way you can use a built in bootstrap color scheme? This code wouldn't work, and I have tried "Active" and "Success" for colors instead of

background-color
, but they didn't work.

<table class="table table-bordered background-color: white">
<thead>
<tr>
<th>example table</th>
</tr>
</thead>
</table>

Answer

you can use .table-striped class, that makes zebra style.

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

OR

if you want more than 2 colors you can use Contextual classes, which you can apply to tr or td

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="active">John</td>
        <td class="success">Doe</td>
        <td class="danger">john@example.com</td>
      </tr>
      <tr class="warning">
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>