Twitter Bootstrap Question posted in

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

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>
Tags:

2

Answers


  1. 0

    Bootstrap has some built in Contextual backgrounds which can be added to any element

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">

<table class="table bg-primary"><tr><td>Hello</td></tr></table>
<table class="table bg-success"><tr><td>Hello</td></tr></table>
<table class="table bg-info"><tr><td>Hello</td></tr></table>
<table class="table bg-warning"><tr><td>Hello</td></tr></table>
<table class="table bg-danger"><tr><td>Hello</td></tr></table>

    Also, you’re code example doesn’t work because you’re adding css in the class attribute vs the style attribute.. should look like this instead

    <table class="table table-bordered" style="background-color: white">
    Login or Signup to reply.
  2. 0

    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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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">[email protected]</td>
      </tr>
      <tr class="warning">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="info">
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search