I'm trying to upgrade my site from Bootstrap 3 to Bootstrap 4. When I changed to Bootstrap 4, now a URL that is inside the modal-body exceeds the width of the modal. As far as I can tell the syntax of the modal is correct for Bootstrap 4, so I'm not sure why the modal width isn't stretching to fit the URL like it did in Bootstrap 3.
Here is a screenshot with the URL circled in yellow: URL too wide
Here is the code:
<?php
echo "<div class='modal fade' id='$p->fldHref' tabindex='-1' role='dialog' aria-labelledby='$p->fldModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='$p->fldModalLabel'>$p->fldModalTitle</h3>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class='modal-body'>
<p>".html_entity_decode($p->fldModalBody)."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default btn-sm' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>"
?>
anjan.com.np :
use whitespace css property. here is an example: https://www.w3schools.com/cssref/pr_text_white-space.asp\nhere is playground: https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre\nCheck what is specified on your code with inspect element and try with whitespace -> It should solve",
2020-10-26T15:49:02