---
title: Modals
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
description: Dialogs for notifications and content.
---
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead.
## Default markup
To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
```html
...
...
```
Look at the example below to see how the modal looks.
```html example centered height="30rem"
Modal title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
```
## Prompt and alert
You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
```html example centered height="30rem"
Are you sure?
Do you really want to remove 84 files? What you've done cannot be undone.
```
```html example centered height="30rem"
Payment succedeed
Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
```
## Modal with form
You can use the modal to create a form. Look at the example below to see how the form looks.
```html example centered height="30rem"