Bootstrap inverse table and thead not styling correctly

Question

While working on a Bootstrap-based project, I came across a strange issue where some of the styling was being overridden by the user agent stylesheet (in Chrome and Firefox). I found this related issue, which was solved by including the <!DOCTYPE html> tag I had initially omitted. But now I can't get the .table-inverse, .thead-inverse, or .thead-defaultclasses to shade my table headers. As far as I understand, I have all the necessary rows, containers, etc in place.

Why isn't the shading working?

.navbar {
  border-radius: 0px
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="display-1">Bootstrap 4 Inverse Table</h2>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-inverse">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

View on JSFiddle

score 26 · Answer 1 · answered Oct 24 '17 at 04:48

26

For anyone like me finding this thread but using Bootstrap 4.0.0-beta.2 or later, table-inverse and thead-inverse have been replaced with -dark per the version release information linked here

answered Oct 24 '17 at 04:48

superbeck

501
1
4
9

score 23 · Answer 2 · answered Nov 16 '16 at 21:47

23

Be sure you are using < th > instead < td > into header.

answered Nov 16 '16 at 21:47

Edgar Diaz

279
2
2

Yes, thanks! I always build tables with only TD and just assumed the style would apply. – Yogi Oct 12 '18 at 23:39
Yes, Good catch! – SKR Nov 25 '20 at 11:38

score 12 · Accepted Answer · answered Feb 09 '16 at 05:54

12

You have to add bootstrap-X.X-flex.css too.

bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js

Where X.X is the version number

OR

Use this CDNs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

answered Feb 09 '16 at 05:54

Peyman Mohamadpour

17,954
24
89
100

That'll do it. Didn't realize this was v4 stuff. Thanks! – Bradley Parker Feb 09 '16 at 18:24
Where do I find bootstrap-X.X-flex.css? – embe Oct 05 '16 at 09:50
@embe [Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.](http://v4-alpha.getbootstrap.com/getting-started/flexbox/) – Peyman Mohamadpour Oct 13 '16 at 14:47

score 4 · Answer 4 · answered Jul 21 '17 at 05:52

It happens for the older versions of bootstrap only. Because the class thead-inverse is not available there. You can just add this design to your design css I hope it will definitely work as I have done so. The reason behind this is thead-inverse is only available in recent versions of bootstrap.css only.

.thead-inverse th {
            color: #fff;
            background-color: #373a3c;
        }

score 2 · Answer 5 · answered Feb 05 '16 at 21:31

2

Easy enough. The CSS sheet you're linking to in your fiddle doesn't include the .table-inverse styling.

answered Feb 05 '16 at 21:31

Eric Foster

31
3

1

I knew you could pick and choose which bootstrap JS files to download, but I thought that all bootstrap CSS came in one file. Where do I find the additional CSS files for things like the `.table-inverse` styling? – Bradley Parker Feb 08 '16 at 14:56

Bootstrap inverse table and thead not styling correctly

5 Answers5