title: How to override CSS to change <th> of bootstrap
body: <p>I want some of the table headers to be aligned to the center, while the other to the left. I tried vaiours methods to override the the  in bootstrap. But I couldnt succeed. Here are the things I tried out :</p>
  
  <p>I created a class called as <code>column-center</code>. The html looks like this :</p>
  
  <pre><code>&lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Roll#&lt;/th&gt;
      &lt;th style="width: 20%"&gt;First Name&lt;/th&gt;
      &lt;th style="width: 20%"&gt;Middle Name&lt;/th&gt;
      &lt;th style="width: 20%"&gt;Last Name&lt;/th&gt;
      &lt;th class="column-center" style="width: 10%"&gt;Class&lt;/th&gt;
      &lt;th class="column-center" style="width: 10%"&gt;Division&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>The CSS I tried are :</p>
  
  <pre><code>.column-center &gt; thead &gt; tr &gt; th{
  text-align: center !important;
  }
  .column-center &gt; thead &gt; tr &gt; th, .column-center &gt; tbody &gt; tr &gt; th, .column-center &gt; tfoot &gt; tr &gt; th, .column-center &gt; thead &gt; tr &gt; td, .column-center &gt; tbody &gt; tr &gt; td, .column-center &gt; tfoot &gt; tr &gt; td{
  text-align: center !important;
  }
  .column-center &gt; tr &gt; th{
  text-align: center !important;
  }
  .column-center .table &gt; thead &gt; tr &gt; th{
  text-align: center !important;
  }
  table &gt; thead &gt; tr &gt; th .column-center{
  text-align: center !important;
  }
  table.table.table-striped tr.column-center td{
  text-align: center !important;
  }
  .column-center &gt; thead &gt; tr &gt; th, .column-center &gt; tbody &gt; tr &gt; th, .column-center &gt; tfoot &gt; tr &gt; th, .column-center &gt; thead &gt; tr &gt; td, .column-center &gt; tbody &gt; tr &gt; td, .column-center &gt; tfoot &gt; tr &gt; td{
  text-align: center;
  }
  .table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; th.column-center {
  text-align: center !important;
  }
  .table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; td.column-center {
  text-align: center;
  }
  .table tbody tr th{
  text-align: center;
  }
  </code></pre>