Attempting to integrate the <pre> tag within a bootstrap 4 modal has proven unsuccessful. The JSON content placed inside the <pre> tag is not displaying properly. Unsure of the missing element causing this issue:
Sample HTML code used:
<div class="modal" id="error_jobs_@guid" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="error_jobs_@guid">Error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<table class="table no-margin">
<tbody>
<tr>
<td>
<pre>@JsonConvert.SerializeObject(item)</pre>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Any insights on why this might be occurring, especially since it seemed to work fine with bootstrap 3? https://i.sstatic.net/A6Cj8.png
EDIT 1:
An executable example can be accessed here: here
Experimented with using the <code> tag which yielded slight improvement but still not ideal. Tried various combinations of <pre> and <code>, none producing the desired outcome. See image for how it appeared using the <code> tag: