ng-bootstrap Modal size

angular ng-bootstrap

Todd Smith · Oct 27, 2017 · Viewed 67.5k times · Source

What is the best way to set/override a custom width for a modal?

It seems ng-bootstrap currently supports

size: 'sm' | 'lg'

but Bootstrap 4 supports sm, md and lg.

Ideally I would like the modal to be responsive and adjust similar to container sizes. And on mobile have it go full screen.

EDIT: Bootstrap 4 _variables.scss seems to have a $modal-md setting but appears to be unused.

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;

Answer

The cleanest solution that I could find is to use the windowClass property.

I.e.:

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

Then add the following to your global CSS styles. This is important as the style won't be picked up from your components CSS.

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}