Centering Table Header Text In Bootstrap

Question

I am trying to center the text in my table header to align with the text below. I just cannot seem to get the header to align.

<div class="container">
<div class="text-center">
    <h2>Lorem Ipsum</h2>
    <p>Lorem Ipsum
    </p>
    <div class="table-responsive">
        <table class="table table-striped">
        <thead>
        <tr>
            <th>Table Header 1
            </th>
            <th>Table Header 2
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Lorem Ipsum
            </td>
            <td>Lorem Ipsum
            </td>
        </tr>
        </tbody>
        </table>
    </div>
</div>

Answer 1

class="text-center" will work for this but strangely enough you need to target the <th> elements directly instead of placing it on the <tr> parent element.

According to this question, the following is why text-center does not affect <thead> when applied to the <table> element:

We set th { text-center: left; }, which is more specific than the class on the parent and thus prevents the header cell from inheriting the centering styles. Putting the .text-center class directly on the <th> should work though (confirmed in the docs).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="text-center">
    <h2>Lorem Ipsum</h2>
    <p>Lorem Ipsum
    </p>
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th class="text-center">Table Header 1
            </th>
            <th class="text-center">Table Header 2
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lorem Ipsum
            </td>
            <td>Lorem Ipsum
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>