Change table header color using bootstrap

Question

I have a MVC5 application which uses bootstrap  The table column name is in black on white background and I want to change it to a blue background and the column name will be in white  how could I do that  I tried to play with the CSS classes without success       lt input type  button  value  Add  onclick  addRow    class  data-button  id  add-row    gt         lt table class  table   gt           lt tr gt               lt th gt                   Html DisplayNameFor model   gt  model name               lt  th gt               lt th gt                   Html DisplayNameFor model   gt  model checkBox1               lt  th gt               lt th gt  lt  th gt           lt  tr gt

User · Accepted Answer

In your CSS  th       background-color  blue      color  white

User · Answer

Try This   table table tr th background-color blue  important  font-color white  important     hope this helps

User · Answer

You could simply apply one of the bootstrap contextual background colors to the header row  In this case  blue background  white text   primary    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  integrity  sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl Sp  crossorigin  anonymous  gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt table class  table   gt  x000D     lt tr class  bg-primary  gt  x000D       lt th gt  x000D          Firstname x000D       lt  th gt  x000D       lt th gt  x000D          Surname x000D       lt  th gt  x000D       lt th gt  lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt John lt  td gt  x000D       lt td gt Doe lt  td gt  x000D     lt  tr gt  x000D       lt tr gt  x000D         lt td gt Jane lt  td gt  x000D         lt td gt Roe lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

there s a bootstrap function to change the color of table header called thead-dark for dark background of table header and thead-light for light background of table header  Your code will look like this after using this function   lt table class  quot table quot  gt       lt tr class  quot thead-danger quot  gt           lt  -- here I used dark table headre -- gt           lt th gt               Html DisplayNameFor model   gt  model name           lt  th gt           lt th gt               Html DisplayNameFor model   gt  model checkBox1           lt  th gt           lt th gt  lt  th gt       lt  tr gt

User · Answer

use css  blue       background-color blue  important     blue th       color white  important       html  lt table class  table blue  gt       lt  table gt

User · Answer

Here is another way to separate your table header and table body   thead th       background-color   006DCC      color  white     tbody td       background-color   EEEEEE      Have a look at this example for separation of head and body of table  JsFiddleLink

[jquery] Change table header color using bootstrap

Examples related to jquery

Examples related to css

Examples related to jquery-ui

Examples related to twitter-bootstrap