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 · 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_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>_x000D_
_x000D_
<table class="table" >_x000D_
  <tr class="bg-primary">_x000D_
    <th>_x000D_
        Firstname_x000D_
    </th>_x000D_
    <th>_x000D_
        Surname_x000D_
    </th>_x000D_
    <th></th>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>John</td>_x000D_
    <td>Doe</td>_x000D_
  </tr>_x000D_
    <tr>_x000D_
      <td>Jane</td>_x000D_
      <td>Roe</td>_x000D_
    </tr>_x000D_
</table>

_x000D_

User · Answer

In your CSS  th       background-color  blue      color  white

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

User · Answer

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

[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