Dialog boxes and pop-ups.
✍️ 3 exercises + code challenge in this lessonA modal is a dialog shown on top of the page.
.modal → .modal-dialog → .modal-content with header, body and footer.data-bs-toggle="modal" data-bs-target="#myModal".data-bs-dismiss="modal".Options: .modal-dialog-centered, .modal-lg, .modal-sm.
Mastering Bootstrap Modals helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-4">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">Delete account</button>
</div>
<div class="modal fade" id="confirm" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Are you sure?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">This cannot be undone.</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>Check what you learned in “Bootstrap Modals”.
Open the modal with this data attribute.
<button data-bs-toggle="" data-bs-target="#myModal">Open</button>
Which class centres a modal vertically?
Add a button that opens the modal #info (data-bs-toggle="modal" data-bs-target="#info").
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services