[modal] option to set a width

This is an enhancement request.

There is size option (i.e. sm, md) for the modal component, but it would be great if there is an option to set the exact width / max-width. For example, <b-modal :width=400></b-modal> so that the modal width would not be no more than 400px.

Thank you.

[tmorehouse]

Bootstrap-vue tries to follow the Bootstrap V4 standard CSS, and hence we only offer the standard Bootstrap modal sizes.

You can, however, place a class on <b-modal>, which will get applied to modal’s root element (div.modal), and then target the .modal-dialog to set the width

HTML:

<b-modal class="my-modal" ...>
   Modal Content
</b-modal>

CSS:

div.modal.my-modal .modal-dialog {
  width: 400px; !important;
}

This technique will also allow you to set the width based on media queries as well, so it will fit on mobile devices.

[tmorehouse]

@Ota-kun , @vacolane

Create a new modal-[size] class like modal-huge, and then create custom CSS to set width (note Bootstrap V4 uses max-width on all modal sizes, so you need to set max-width, and based on media queries, so you may need to target a certain screen width)

.modal .modal-huge {
  max-width: 2000px;
  width: 2000px;
}

and use that size on b-modal:

<b-modal size="huge" ... >
</b-modal>

The size prop just adds a class on the modal-dialog element modal-xxx where xxx is the text passed to the size prop (i.e. huge is converted to modal-huge). So modal isn’t limiting you to specific sizes, it is only limited by what CSS classes exist.