Tutorials Bootstrap 5 Tutorial
Modals
Modals: free step-by-step lesson with examples, common mistakes, and interview tips — part of Bootstrap 5 Tutorial on Toolliyo Academy.
On this page
Bootstrap 5 Tutorial · Lesson 51 of 100
Modals
Setup & Utilities ✓ → Components & Forms ✓ → Theme & Integrate → Ship & Projects
Theme & Integrate · 3 — Polish · ~6 min · Interactive Components
What is this?
Modals are dialog overlays. A button with data-bs-toggle="modal" data-bs-target="#id" opens the matching .modal.
Why should you care?
Confirm deletes and short forms without leaving the page.
See it live — copy this example
Examples include Bootstrap 5.3 CDN links. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>BootVerse</title>
</head>
<body class="p-3">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDel">Delete</button>
<div class="modal fade" id="confirmDel" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Confirm</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">Remove this BootVerse item?</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- fade animates.
- btn-close and data-bs-dismiss close it.
- Keep one primary destructive action.
Practice next
- Open and Esc-close the modal.
- Change the body text.
- Try modal-dialog-centered.
- Open via JS: bootstrap.Modal.getOrCreateInstance.
- Add static backdrop option.
Remember
Toggle + target id. Header body footer structure. Dismiss controls required.
Confirm delete
Avoid accidental row deletes.
Outcome: User confirms in a dialog.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!