Use table row coloring for cells in Bootstrap

Question

Twitter Bootstrap offers classes to color table rows like so    lt tr class  success  gt    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

User · Answer

With less you can set it up like this    table tbody tr        amp  error  gt  td   background-color  red  important         amp  error hover  gt  td   background-color  yellow  important         amp  success  gt  td   background-color  green  important         amp  success hover  gt  td   background-color  yellow  important                That did the trick for me

User · Answer

With the current version of Bootstrap  3 3 7   it is possible to color a single cell of a table like so    lt td class    text-center col-md-4 success  gt

User · Answer

You can override the default css rules with this    table tbody tr  gt  td success     background-color   dff0d8  important      table tbody tr  gt  td error     background-color   f2dede  important      table tbody tr  gt  td warning     background-color   fcf8e3  important      table tbody tr  gt  td info     background-color   d9edf7  important      table-hover tbody tr hover  gt  td success     background-color   d0e9c6  important      table-hover tbody tr hover  gt  td error     background-color   ebcccc  important      table-hover tbody tr hover  gt  td warning     background-color   faf2cc  important      table-hover tbody tr hover  gt  td info     background-color   c4e3f3  important       important is needed as bootstrap actually colours the cells individually  afaik it s not possible to just apply background-color to a tr   I couldn t find any colour variables in my version of bootstrap but that s the basic idea anyway

User · Answer

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  gt  td      amp  success   background-color   green       amp  info   background-color   blue              Surely there s a way to use extend or the LESS equivalent to avoid repeating the same styling

User · Answer

Updated html for the newer bootstrap       table-hover  gt  tbody  gt  tr danger hover  gt  td        background-color  red  important     table-hover  gt  tbody  gt  tr warning hover  gt  td        background-color  yellow  important     table-hover  gt  tbody  gt  tr success hover  gt  td        background-color  blue  important

[css] Use table row coloring for cells in Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to less