How to change ngx bootstrap modal width?

Question

How can I set the width to my ngx bootstrap modal, I've tried but like It is fixed?

Here's the html

    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <button type="button" class="close" data-dismiss="modal" aria-
    label="Close" (click)="hide()"><span aria-hidden="true">&times;</span>
     </button>
            <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
            <div class="modal-footer">
                <div class="col-xs-6 no-padding-left">
                    <button type="button" id="dialog_no" class="btn btn-
        default btn-block" data-dismiss="modal" (click)="hide()">No</button>
                </div>
                <div class="col-xs-6 no-padding-right">
                    <button type="button" id="dialog_yes" class="btn btn-
     primary btn-block ladda-button" data-style="expand-right" 
     (click)="confirm()">Yes</button>
                </div>
            </div>
        </div> 
    </div>
     </div>
  </div>

How can I set the width of the modal for buttons to be placed just on the edge of the modal, with lets say 5 px of border margin?

modal bootstrap

I haven't put any styling yet in my css file, even tho I've tried to modify the width but didn't I guess know how...

Answer 1

On your method call for the modal, you can setup a configuration object with the ModalOptions class that also comes with ngx-bootstrap. Within that, the 'class' property allows you to pass classes which will be appended.

const config: ModalOptions = { class: 'modal-sm' };
this.bsModalRef = this.modalService.show(YourComponent, config);

hope this helps

Answer 2

When creating a modal, pass your css class to options like this:

this.modalService.show(template, { class: 'modal-lg' });