How can I fix Laravel table going off page - laravel

Question

I have a table which I have created in a laravel blade, I've used bootstrap for this but my table seems to span off the screen, I have never really used laravel and normally my tables have auto centred as needed, I'm hoping someone can make some suggestions or share snippets to help me out :)
I have this image here:
I thought I should also put my blade in but only put the form-group as it will save your guys time :)
<div class="form-group">
<table id="userTable" data-page-length='5' cellspacing="0"
class="table table-bordered table-striped table-hover table-condensed"
role="grid">
<thead>
<tr>
<th scope="col">MESSAGE ID</th>
<th scope="col">MSISDN</th>
<th scope="col">MO/MT</th>
<th scope="col">TYPE</th>
<th scope="col">SENT/RECEIVED</th>
<th scope="col">TITLE</th>
<th scope="col">ORIENTATION</th>
<th scope="col">DESCRIPTION</th>
<th scope="col">IMAGE URL</th>
<th scope="col">ALIGNMENT</th>
<th scope="col">STATUS</th>
</tr>
</thead>
<tbody>
<tr>
<td style='font-size:14px'>{{$message->id}}</td>
<td>{{$message->msisdn}}</td>
<td class="text-center">
#if ($message->direction == 'mo')
<span class='badge badge-warning'>mo</span>
#else
<span class='badge badge-success'>{{$message->direction}}</span>
#endif
</td>
<td>{{$message->type}}</td>
<td>{{$message->created_at}} </td>
<td>{{$message->content->richCard->standaloneCard->cardOrientation}}</td>
<td>{{$message->content->richCard->standaloneCard->cardContent->title}}</td>
<td>{{$message->content->richCard->standaloneCard->cardContent->description}}</td>
<td>{{$message->content->richCard->standaloneCard->cardContent->media->contentInfo->fileUrl}}</td>
<td>{{$message->content->richCard->standaloneCard->thumbnailImageAlignment}}</td>
<td class="text-center">
#if ($message->status == 'NOK')
<span class='badge badge-danger'>NOK</span>
#elseif ($message->status == 'received')
<span class='badge badge-info'>received</span>
#elseif ($message->status == 'delivered')
<span class='badge badge-primary'>delivered</span>
#elseif ($message->status == 'queued')
<span class='badge badge-warning'>queued</span>
#elseif ($message->status == 'read')
<span class='badge badge-success'>read</span>
#elseif ($message->status == 'sent')
<span class='badge badge-success'>sent</span>
#endif
</td>
</tr>
</tbody>
</table>
</div>
Any help would be greatly appreciated as I've never had this before.

Answer 1

before your table tag use
<div class='table-responsive'>
and close the div after closing your table tag.
This worked for me in some cases.

Answer 2

You will have to use table-responsive
<div class="table-responsive">
<table class="table">
...
</table>
</div>