Bootstrap 5 Modal Generator

Q: 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.

Q: 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.

Create customisable Bootstrap 5 modal dialogs. Choose size, position, and behaviour, copy the HTML code into your project.

Modal Settings

Modal ID

Title

Body Content

Size

Close buttonVertically centeredScrollable body

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

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.

Build the site that modal lives in

From one modal to a full responsive site — hero, features, pricing, and footer included.

Build a full site from this