Bootstrap Two Side by Side Modals

Question

I have a modal that shows various information, triggering a single modal works perfect. However, when I try to apply Bootstraps' grid logic to place 2 side-by-side modals, I'm failing. This is the code of a single modal:

<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">&times;</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>

FWIW I'm loading the modal via JS using:

$('.modal-body').load("/path/to/modal.html", function () {
    $('#my_modal').modal({
      show: true
    })
});

How can I place those two modals side by side? Thanks!

Answer 1

Use CSS to position the .modal-content ...

#modal1 .modal-content {
    margin-left: -50%;
}

#modal2 .modal-content {
    margin-left: 50%;
}

Demo: https://www.codeply.com/go/V4Eda15hEJ