Convert grid menu to table bootstrap - html

Question

I have a grid menu with specific css styling, and I want to convert that grid to a table so i can use jquery datatable, but i didn't know how
here is an item of my grid :
<div class="row menu-filter-items">
<div class="col-md-4 margin-b-30 menu-item">
<a href="#" class="menu-grid">
<img src="images/restolist.png" alt="" class="img-fluid"/>
<div class="menu-grid-desc">
<!-- <span class="price float-right">$9.50</span> -->
<h4 class="a" id="title">BB</h4>
<p>
Description
</p>
</div>
</a>
</div>
what would it be as an element of a <td> in a table ?

Answer 1

DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap.
This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialized as normal.
Source: datatables.net
Example of Provided Code has Bootstrap Table
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Table Use Sample -->
<div class="container">
<table class="table">
<tr>
<td>
<a href="#">
<img src="http://via.placeholder.com/140x100" alt="" class="img-fluid"/>
</a>
</td>
</tr>
<tr>
<td>
<h4>BB</h4>
</td>
</tr>
<tr>
<td>
<p>
Description
</p>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Wasn't sure how exactly you wanted the table formatted from the code you provided, but you get the idea.
Hope that helps.