Modal

Use Bootstrap’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.

View the official docs here

Examples

Basic

Astro file 
---
import { Modal, Button } from 'astro-bootstrap';
const id = 'modalDemo';
---
<!-- Button to trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target={`#${id}`}>
  Launch demo modal
</button>

<!-- Modal -->
<Modal id={id} fade>
  <Modal.Header parent={id}>Modal title</Modal.Header>
  <Modal.Body>Woo-hoo, you're reading this text in a modal!</Modal.Body>
  <Modal.Footer>
    <Button variant="primary" modalClose>Close</Button>
    <Button variant="secondary" >Save Changes</Button>
  </Modal.Footer>
</Modal>

API

Modal.Header

Modal.Body

Modal.Footer