6

I'm sure this is just something stupid, but I've copied the table header formatting example from bootstraps website here but it isn't actually changing the table header color. What am I doing wrong?

Running the code snippet shows the behavior I am describing when I want it to look like: enter image description here

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  </head>
  <body>
    <div class="container">
    <table class="table table-hover table-striped">
      <thead class="thead-inverse">
        <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>
  </body>
</html>

4
  • 7
    Different version of Bootstrap? You link BS3 but the stying comes from BS4. That class thead-inverse does not exist in BS3 I think.
    – Paulie_D
    Commented Jun 8, 2016 at 15:51
  • The example website is Bootstrap v4, the code you posted is using a stylesheet from Bootstrap v3.
    – vanburen
    Commented Jun 8, 2016 at 15:52
  • 3
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" use this
    – bhansa
    Commented Jun 8, 2016 at 15:55
  • Dang it, that's definitely it.
    – Bob
    Commented Jun 8, 2016 at 16:04

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.