Modal

The dialog renders at the end of <body>, so no overflow: hidden ancestor clips it. It traps focus and returns it on close; Escape, the backdrop and the header's close button close it, and v-model:open follows. The header slot names the dialog; any element inside with data-bs-dismiss="modal" closes it.

Basic usage

Scrollable, centred

Source

<button type="button" class="btn btn-primary" @click="open = true">Show modal</button><BsModal v-model:open="open">  <template #header>Modal title</template>  Place any content here — forms, lists, embedded components.  <template #footer>    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>  </template></BsModal>