Bootstrap table striped How do I change the stripe background colour

Question

With Bootstrap class table-striped  every other row in my table has a background colour equal to  F9F9F9  How can I change this colour

User · Accepted Answer

table-striped  gt  tbody  gt  tr nth-child 2n 1   gt  td   table-striped  gt  tbody  gt  tr nth-child 2n 1   gt  th      background-color  red      change this line in bootstrap css or you could use  odd  or  even  instead of  2n 1

User · Answer

You have two options  either you override the styles with a custom stylesheet  or you edit the main bootstrap css file  I prefer the former   Your custom styles should be linked after bootstrap    lt link rel  stylesheet  src  bootstrap css  gt   lt link rel  stylesheet  src  custom css  gt    In custom css   table-striped gt tr nth-child odd      background-color red

User · Answer

Easiest way for changing order of striped   Add empty tr before your table tr tags

User · Answer

Delete table-striped  Its overriding your attempts to change row color   Then do this In css     tr nth-child odd        background-color  lightskyblue            tr nth-child even        background-color  lightpink             th          background-color  lightseagreen

User · Answer

Don t customize your bootstrap CSS by directly editing bootstrap CSS file Instead  I suggest to  copy paste bootstrap CSS and save them in a different CSS folder and there you can customize or edit stylings suitable to your needs

User · Answer

With Bootstrap 4  the responsible css configuration in bootstrap css for  table-striped is     table-striped tbody tr nth-of-type odd      background-color  rgba 0  0  0  0 05       For a very simple solution  I just copied it into my custom css file  and changed the values of background-color  so that now I have a fancier light blue shade    table-striped tbody tr nth-of-type odd      background-color   rgba 72  113  248  0 068

User · Answer

If using SASS and Bootstrap 4  you can change the alternating background row color for both  table and  table-dark with   table-accent-bg   990000   table-dark-accent-bg   990000

User · Answer

table-striped gt tbody gt tr nth-child odd  gt td   table-striped gt tbody gt tr nth-child odd  gt th     background-color   e08283    color  white     table-striped gt tbody gt tr nth-child even  gt td   table-striped gt tbody gt tr nth-child even  gt th     background-color   ECEFF1    color  white      Use  even  for change colour of even rows and use  odd  for change colour of odd rows

User · Answer

If you are using Bootstrap 3  you can use Florin s method  or use a custom CSS file   If you use Bootstrap less source instead of processed css files  you can directly change it in bootstrap less variables less     Find something like        Background color used for   table-striped    table-bg-accent                 f9f9f9

User · Answer

I know this is an old post  but changing th or td color is not te right way  I was fooled by this post as well  First load your bootstrap css and add this in your own css  This way it is only 2 lines if you have a hovered table  else its only 1 line  unless you want to change odd and even  -   table-striped gt tbody gt tr nth-child odd        background-color  LemonChiffon     table-hover tbody tr hover       background-color  AliceBlue

User · Answer

If you want to actually reverse the colors  you should add a rule that makes the  odd  rows white as well as making the  even  rows whatever color you want

User · Answer

I found this checkerboard pattern  as a subset of the zebra stripe  to be a pleasant way to display a two-column table  This is written using LESS CSS  and keys all colors off the base color    base-color   0000ff   row-color  lighten  base-color  40         other-row  darken  row-color  10     tbody       td nth-child odd    width  45         tr nth-child odd   gt  td nth-child odd            background  darken  row-color  0          tr nth-child odd   gt  td nth-child even            background  darken  row-color  7          tr nth-child even   gt  td nth-child odd            background  darken  other-row  0          tr nth-child even   gt  td nth-child even            background  darken  other-row  7          Note I ve dropped the  table-striped  but doesn t seem to matter   Looks like

User · Answer

Add the following CSS style after loading Bootstrap    table-striped gt tbody gt tr nth-child odd  gt td    table-striped gt tbody gt tr nth-child odd  gt th      background-color  red     Choose your own color here

User · Answer

I came across this post while hunting down a solution for myself  By using chrome s inspector  I was able to determine that the striped color was being applied from the --bs-table-striped-color tag  overriding that tag in your css   lt style scoped gt  table   --bs-table-striped-color   85d1ee     lt  style gt

[css] Bootstrap table striped: How do I change the stripe background colour?

Examples related to css

Examples related to twitter-bootstrap

Examples related to html-table