Bootstrap 4 modal width-custom forms-multicolumn

wkeull

For those looking for a solution to adjust custom form width. While it may not be perfect for all instances, this combined a few methods throughout the forum and seems to work well.
Editor:

editor = new $.fn.dataTable.Editor({
    ajax: "estimate_settings_editor",
    type: "POST",
    serverSide: true,
    template: "#customForm"


    editor.on("open", function (e, mode, action) {

    //Make Dialog Bigger - Bootstrap
    $(".modal-dialog").addClass("modal-lg");
    })

css(as needed):

div.modal-dialog.modal-lg {
    max-width: 70%;
    margin: 0 auto;
}

customForm(note using inherent bootstrap styling for row/col):

<div id="customForm" > 
        <div class="row">
            <fieldset class="col">
                <legend>Text</legend>             
                    <div  data-editor-template="-----"></div>
            </fieldset>
        </div>
         <div class="row">
            <fieldset class="col">
                <legend>Text</legend>             
                    <div  data-editor-template="-----"></div>
            </fieldset>
        </div>
</div>