Bootstrap 5 Modal Generator
Create customisable Bootstrap 5 modal dialogs. Choose size, position, and behaviour, copy the HTML code into your project.
Modal settings
Generated HTML
<!-- Button trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modal title
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Preview
What is a Bootstrap 5 modal?
A Bootstrap 5 modal is a dialog box that opens on top of the current page and dims the content behind it. It is built from the modal, modal-dialog and modal-content classes and opened by a trigger element with data-bs-toggle="modal". Modals suit confirmations, short forms and other focused tasks that should not take the user to a new page.
How to use the modal generator
- 1
Set a unique Modal ID. The generated trigger button points to it with data-bs-target.
- 2
Enter the modal title and the body content.
- 3
Choose a size: Default, Small, Large, Extra Large or Fullscreen.
- 4
Tick Close button, Vertically centered or Scrollable body as needed and check the preview.
- 5
Copy the HTML into your page, with the Bootstrap 5 CSS and bootstrap.bundle.min.js loaded.
Frequently asked questions
What is the Modal Generator tool?
The Modal Generator is a free online tool that creates Bootstrap 5 modal dialog HTML code. Configure title, body content, size, and behaviour, then copy the ready-to-use code.
How do I trigger a Bootstrap 5 modal?
Use a button or link with data-bs-toggle="modal" and data-bs-target="#yourModalId". The generated code includes a trigger button that launches the modal.
Can I customise the modal size?
Yes. Bootstrap 5 supports Default, Small (modal-sm), Large (modal-lg), Extra Large (modal-xl), and Fullscreen sizes. Select your preferred size in the generator.
Why does my Bootstrap modal not open?
Modals need Bootstrap's JavaScript. Load bootstrap.bundle.min.js before the closing body tag, check that the trigger's data-bs-target matches the modal's id (including the # sign), and give every modal on the page a unique id.
How do I stop a modal closing when users click outside it?
Add data-bs-backdrop="static" and data-bs-keyboard="false" to the element with the modal class. Clicking the backdrop or pressing Escape will then leave the modal open, so keep a visible close button in the header or footer.
Is the Modal Generator free?
Yes, the Modal Generator is completely free with no signup required.
Build the site that modal lives in
From one modal to a full responsive site: hero, features, pricing, and footer included.