Can I use "Modal Trigger" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Modal Trigger — Free Modals Snippet (Bootstrap 5)

Loading…

Modal Trigger — Free Modals Snippet (Bootstrap 5) | GoSnippets

Source Code

1<!-- Trigger button -->
2<div class="container py-4 text-center">
3  <button type="button" class="btn btn-primary btn-lg px-5"
4    data-bs-toggle="modal" data-bs-target="#demoModal">
5    Open Modal
6  </button>
7</div>
8
9<!-- Modal -->
10<div class="modal fade" id="demoModal" tabindex="-1"
11  aria-labelledby="demoModalLabel" aria-hidden="true">
12  <div class="modal-dialog modal-dialog-centered">
13    <div class="modal-content border-0 shadow-lg">
14      <div class="modal-header border-0 pb-0">
15        <h5 class="modal-title fw-bold fs-4" id="demoModalLabel">
16          Confirm Action
17        </h5>
18        <button type="button" class="btn-close" data-bs-dismiss="modal"
19          aria-label="Close"></button>
20      </div>
21      <div class="modal-body py-4">
22        <p class="text-muted mb-0">
23          Are you sure you want to proceed? This action cannot be undone
24          and will permanently affect your account settings.
25        </p>
26      </div>
27      <div class="modal-footer border-0 pt-0 gap-2">
28        <button type="button" class="btn btn-light"
29          data-bs-dismiss="modal">Cancel</button>
30        <button type="button" class="btn btn-primary px-4">
31          Confirm
32        </button>
33      </div>
34    </div>
35  </div>
36</div>

Modal Trigger

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Modals snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Modal Trigger

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Modals snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection