Struggling to create a BootStrap 4 Modal that is centered in the screen and adjusts its width based on content? You're not alone. Despite trying different approaches like the container fluid and CSS methods, achieving a variable width modal is proving to be a challenge. If you have any suggestions or tips, I would greatly appreciate them as I'm not an expert in these tools.
Here's a look at my current modal:
<div class="modal fade" id="modal_{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="snapshotmodal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Snapshot:</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-auto">
<h4>{{ alert.title }} </h4><br><br>
{{ alert.data|safe }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any assistance is greatly appreciated. Thank you in advance.