Twitter Bootstrap offers classes to color table rows like so:
<tr class="success">
I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on table cells, too. Obviously, I could define my own classes with the same colors and be done with it.
But is there a shorthand in CSS. LESS, to let the td
inherit the classes?
This question is related to
css
twitter-bootstrap
less
Bottom line is that you'll have to write a new css rule for that.
Depending on which bundle of Twitter Bootstrap you're using, you should have variables for the various colours.
Try something like:
.table tbody tr > td {
&.success { background-color: $green; }
&.info { background-color: $blue; }
...
}
Surely there's a way to use extend
or the LESS equivalent to avoid repeating the same styling.
With the current version of Bootstrap (3.3.7), it is possible to color a single cell of a table like so:
<td class = 'text-center col-md-4 success'>
Updated html for the newer bootstrap
.table-hover > tbody > tr.danger:hover > td {
background-color: red !important;
}
.table-hover > tbody > tr.warning:hover > td {
background-color: yellow !important;
}
.table-hover > tbody > tr.success:hover > td {
background-color: blue !important;
}
With less you can set it up like this;
.table tbody tr {
&.error > td { background-color: red !important; }
&.error:hover > td { background-color: yellow !important; }
&.success > td { background-color: green !important; }
&.success:hover > td { background-color: yellow !important; }
...
}
That did the trick for me.
Source: Stackoverflow.com