In twitter-bootstrap-3 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>
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">
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With