My dilemma involves creating two side-by-side modals using Bootstrap's grid logic. I have successfully implemented a single modal with the following code:
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="my_modal" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Raw Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-body-right">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
To load this modal, I use the following JavaScript code:
$('.modal-body').load("/path/to/modal.html", function () {
$('#my_modal').modal({
show: true
})
});
Can anyone provide guidance on how to position two modals side by side? Thank you!