<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-hover table-striped">
<thead>
<tr class="thead-dark">
<th>S. #</th>
<th>Title & Discription</th>
<th>Another Header</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
01
</td>
<td style="max-width:300px">
<h6>Dummy Title 01</h6>
<em class="text-muted">
This is some long text or discription regarding Dummy Title 01. Even more lenghthy description will be automatically adjusted as per the width specified.
</em>
</td>
<td>
Column data
</td>
<td>
<a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> |
<a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
02
</td>
<td style="max-width:300px">
<h6>Dummy Title 02</h6>
<em class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique facere necessitatibus quo laboriosam consequuntur
</em>
</td>
<td>
Some Data
</td>
<td>
<a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> |
<a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
03
</td>
<td style="max-width:300px">
<h6>Another Title</h6>
<em class="text-muted">
This is some long text or discription about Another Title or else about.
</em>
</td>
<td>
This is some data
</td>
<td>
<a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> |
<a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td>
04
</td>
<td style="max-width:300px">
<h6>Yet Another Title</h6>
<em class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquam placeat odit quasi autem distinctio veritatis ex numquam nihil nulla tempora a dolorem omnis beatae facilis perspiciatis doloribus
</em>
</td>
<td>
Data goes here
</td>
<td>
<a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> |
<a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
