I'm currently updating the front-end of an application by utilizing bootstrap 4. I've encountered tables in certain sections of the application that I want to replace, so I'm converting them into a .row/.col grid system. While bootstrap provides styling options for tables, I'm struggling to find similar options for rows and columns. The table in the snippet automatically receives styling, but how can I achieve the same look using a grid system?
Here's an 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>