A decade of Canvas at your command — powered by our custom AI engineStart Building →

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

Modal title
×
Modal body text goes here.
Close Save changes

Frequently Asked Questions

What is the Modal Generator? ▼
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, Large, Extra Large, and Fullscreen sizes. Select your preferred size in the generator.
Is the Modal Generator free? ▼
Yes — the Modal Generator is completely free with no signup required.