How Can I change bootstrap-modal width in my situation?

Question

I use the below way to load modal content to main html:

main html:

<div class="modal modal-custom fade" id="custom-view">
</div>
.....

modal html(on a Individual html):

<div class="modal-dialog">
    <div class="modal-content message_align">
        <div class="modal-body" align="center">
            <span class="section">Custom Info</span>
                {% crispy form form.helper%}
        </div>
    </div>
</div>

I load the modal content to main html like this:

$(".mod-custom").click(function(ev) {
    ......
    $("#custom-view").load(url, function() {
        $("#custom-view").modal('show');
    }
}

the url is to render data on modal html

In my situation,How to change the width?

Answer 1

I hope this link might help. Changing modal size. https://coolestguidesontheplanet.com/bootstrap/modal.php#myModal2

Answer 2

If you want to change the modal-content width, you can add modal-content width when #custom-view on click

$(".mod-custom").click(function(ev) {
......
$("#custom-view").load(url, function() {
    $("#custom-view").modal('show');
$('.modal-content').css({'width':'900px'});
}}

just change the class .modal-content if you want to change another class