Making grid like table styles in Bootstrap 4

html css twitter-bootstrap bootstrap-4

11,384

You'd add CSS to get the same styles...

.grid-striped .row:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

Or, use the Bootstrap 4 utilities (ie: font-weight-bold, bg-light, etc..) but these would need to be applied individually and won't automatically alternate odd rows like the CSS above.

Demo: https://www.codeply.com/go/IDBemcEAyL

Also remember that table columns can use the grid

11,384

Author by

ZCT

Updated on July 22, 2022

Comments

ZCT almost 2 years

I am re-doing the front-end of an application using bootstrap 4. The application uses tables in some places that I wish it didn't so I am re-working those tables into a .row/.col grid system. The nice part about tables in bootstrap is that there appear to be styling options available for tables but none seem to exist for rows and columns. You can see in the snippet that it's automatically styling the table but how can I do that using grid?

For example:

<!DOCTYPE html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
     <thead class="thead-light">
          <th>Thing one</th>
          <th>Thing two</th>
          <th>Thing Three</th>
     </thead>
     <tbody>
        <tr>
          <td>One</td>
          <td>Two</td>
          <td>Three</td>
        </tr>
        <tr>
          <td>Four</td>
          <td>Five</td>
          <td>Six</td>
        </tr>
        <tr>
          <td>Seven</td>
          <td>Eight</td>
          <td>Nine</td>
        </tr>
     </tbody>
</table>

<div class="container">
<div class="row">
    <div class="col">
    Thing one
    </div>
    <div class="col">
    Thing two
    </div>
    <div class="col">
    Thing three
    </div>
</div>
    <div class="row">
      <div class="col">
        One
      </div>
      <div class="col">
        Two
      </div>
      <div class="col">
        Three
      </div>
    </div>
    <div class="row">
      <div class="col">
        Four
      </div>
      <div class="col">
        Five
      </div>
      <div class="col">
        Six
      </div>
    </div>
      <div class="row">
        <div class="col">
          Seven
        </div>
        <div class="col">
          Eight
        </div>
        <div class="col">
          Nine
        </div>
      </div>
    </div>
  </body>