Making grid like table styles in Bootstrap 4

Question

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>

if you want your divs to be styled like a table - use a table. There is nothing wrong with using tables for their intended purpose. — Turnip, Feb 21 '18 at 15:16
if it is tabular data, why not just use the table? Otherwise you're making it inaccessible by not having data in their proper columns — Pete, Feb 21 '18 at 15:16
I'm having trouble with tables being responsive and doing goofy stuff so I thought it would be easier to just switch to grids. — ZCT, Feb 21 '18 at 15:30
Also, I like the idea of putting content in widget style blocks and cards don't work very well with tables. — ZCT, Feb 21 '18 at 15:43

Carol Skelly · Accepted Answer · 2018-02-21T15:28:35.503

6

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

edited Feb 21 '18 at 15:28

answered Feb 21 '18 at 15:17

Carol Skelly

351,302
90
710
624

Making grid like table styles in Bootstrap 4

1 Answers1