Modal width inline CSS bootstrap

Question

I need to customize the width of the modal (need to make it larger than modal-xl)

My approach is as follows however, it does not seem to be working.

<div class="modal"  id="creditNoteDetailsModal" *ngIf="creditNoteDetails" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="width: 1400px" role="document">
....
....
    </div>
</div>

Answer 1

Add this in your css

   .modal-xl{    
    max-width:80%;    
    }

If not working just add !important so it would look like below

.modal-xl {
    max-width: 80% !important;
}

And call the modal-xl.

<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
 <!-- some model content --->
</div>

or set stylesheet as below

<div class="modal-dialog modal-xl modal-dialog-centered" role="document" style="max-width: 80%;">

Refer -> Modal width (increase)