StepsEasy
Bootstrap Modal - Example
Run
Reset
Destroy & Close
← Back to lesson
Code Editor
html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open Modal </button> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button class="btn btn-primary">Save</button> </div> </div> </div> </div>
Result
Click "Run" to execute the code...
Loading runtime...
Ready
HTML | In-Browser Execution