Bootstrap 5 basic modal design

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

Source Code

More Modals snippets

Comments(0)