ng-bootstrap Modal size

Question

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

It seems ng-bootstrap currently supports

size: \'sm\' | \'lg\'

Answer 1

When you don't specify the size, the default value use $modal-md (500px).

All the 3 modals sm, md and lg are responsive and will display on full width (with borders) on mobile.

If you really want a new size, you can use a custom size:

this.modalService.open(MyModalComponent, { size: 'xl' });

With a css for this class:

.modal-xl {
  max-width: 1000px;
}

EDIT: the xl size is now a standard size so the CSS.