Hi I am currently working on a client's Moodle site. We are trying to get responsive tables on the home landing page. I have not been able to copy the entire Bootstrap framework into the site as it conflicts with other Moodle libraries. I have just copied and pasted the table elements, starting from .container from the bootstrap CSS and added it into the Moodle custom CSS space. I've then added the following:
<div class="container">
<div class="col-12 col-sm-12 col-lg-12">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<a href="http://moodle.ranzco.edu/course/view.php?id=98" class="nounderlineyellow"><i class="fa fa-medkit" aria-hidden="true"></i></a><span style="font-size: x-large;"><br />Trainees</span>
</td>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<p><a href="http://moodle.ranzco.edu/course/view.php?id=102" class="nounderlineyellow"><i class="fa fa-user-md" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Term Supervisors Clinical Tutors</span></p>
</td>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<a href="http://moodle.ranzco.edu/course/view.php?id=101" class="nounderlineyellow"><i class="fa fa-graduation-cap" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Examiners</span>
</td>
</tr>
<tr>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<a href="http://moodle.ranzco.edu/course/view.php?id=97" class="nounderlineyellow"><i class="fa fa-eye" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Mentors</span>
</td>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<a href="http://moodle.ranzco.edu/course/view.php?id=100" class="nounderlineyellow"><i class="fa fa-users" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">Fellows</span>
</td>
<td class="fhcell hvr-shutter-in-horizontal" style="text-align: center;">
<a href="http://moodle.ranzco.edu/course/view.php?id=99" class="nounderlineyellow"><i class="fa fa-globe" aria-hidden="true"></i></a><br /><span style="font-size: x-large;">International Medical Graduates</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
But it's not working. Any help would be really appreciated. The site URL is Moodle Site
Your second line <div class="col-12 col-sm-12 col-lg-12"> should be <div class="col-md-12 col-sm-12 col-lg-12"> there is no in col-12 in bootstrap.
Also you can try here bootstrap tables here first.