Can I use "Bootstrap 5 basic modal design" 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.

Bootstrap 5 basic modal design — Free Modals Snippet (Bootstrap 5)

Loading…

1<div class="container"> 2 <h1 class="display-4 text-center mb-4">Bootstrap Modals</h1> 3 4 <div class="row mb-4"> 5 <div class="col text-center"> 6 <h3>The Basic Modal</h3> 7 <a href="#" class="btn btn-lg btn-success" data-bs-toggle="modal" data-bs-target="#basicModal">Click to open Modal</a> 8 </div> 9 </div> 10 11 <div class="row mb-4"> 12 <div class="col text-center"> 13 <h3>The Large Modal</h3> 14 <a href="#" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Click to open Modal</a> 15 </div> 16 </div> 17 18 <div class="row"> 19 <div class="col text-center"> 20 <h3>The Small Modal</h3> 21 <a href="#" class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#smallModal">Click to open Modal</a> 22 </div> 23 </div> 24</div> 25 26 27<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 28 <div class="modal-dialog"> 29 <div class="modal-content"> 30 <div class="modal-header"> 31 <h4 class="modal-title" id="myModalLabel">Basic Modal</h4> 32 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> 33 <span aria-hidden="true">×</span> 34 </button> 35 </div> 36 <div class="modal-body"> 37 <h3>Modal Body</h3> 38 </div> 39 <div class="modal-footer"> 40 <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button> 41 <button type="button" class="btn btn-primary">Save changes</button> 42 </div> 43 </div> 44 </div> 45</div> 46 47 48<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 49 <div class="modal-dialog modal-lg"> 50 <div class="modal-content"> 51 <div class="modal-header"> 52 <h4 class="modal-title" id="myModalLabel">Large Modal</h4> 53 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> 54 <span aria-hidden="true">×</span> 55 </button> 56 </div> 57 <div class="modal-body"> 58 <h3>Modal Body</h3> 59 </div> 60 <div class="modal-footer"> 61 <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button> 62 <button type="button" class="btn btn-primary">Save changes</button> 63 </div> 64 </div> 65 </div> 66</div> 67 68 69<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 70 <div class="modal-dialog modal-sm"> 71 <div class="modal-content"> 72 <div class="modal-header"> 73 <h4 class="modal-title" id="myModalLabel">Small Modal</h4> 74 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> 75 <span aria-hidden="true">×</span> 76 </button> 77 </div> 78 <div class="modal-body"> 79 <h3>Modal Body</h3> 80 </div> 81 <div class="modal-footer"> 82 <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button> 83 <button type="button" class="btn btn-primary">Save changes</button> 84 </div> 85 </div> 86 </div> 87</div>

Bootstrap 5 basic modal design

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