Bootstrap 5 Modal Guide
A modal is a pop-up window that appears on top of the main content. Bootstrap 5 provides a simple way to create responsive, customizable modals without additional JavaScript.
1. Basic Bootstrap 5 Modal
To create a modal, use the .modal class along with Bootstrap's built-in attributes for toggling.
Example: Basic Modal
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap 5 Modal Example</h2>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>
</div>
<!-- Modal Structure -->
<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">
This is a Bootstrap 5 modal popup.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
How It Works:
- Button:
data-bs-toggle="modal"anddata-bs-target="#myModal"open the modal. - Modal Structure:
.modal- Main container.modal-dialog- Defines the dialog box.modal-content- Contains header, body, and footer.modal-header- Title and close button.modal-body- Modal content.modal-footer- Buttons
2. Centered Modal
To center a modal, add the .modal-dialog-centered class.
<div class="modal fade" id="centeredModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This modal is vertically centered.
</div>
</div>
</div>
</div>
3. Large, Small, and Extra-Large Modals
Bootstrap provides .modal-lg, .modal-sm, and .modal-xl to control modal size.
<div class="modal fade" id="largeModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This is a large modal.
</div>
</div>
</div>
</div>
4. Scrolling Modal
For long content, add .modal-dialog-scrollable to enable scrolling inside the modal.
<div class="modal fade" id="scrollingModal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scrollable Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Long content goes here...</p>
<p>More content...</p>
<p>Even more content...</p>
</div>
</div>
</div>
</div>
5. Full-Screen Modal
Use .modal-fullscreen for a full-screen modal.
<div class="modal fade" id="fullscreenModal">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full-Screen Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This modal covers the entire screen.
</div>
</div>
</div>
</div>
6. Modal with Form
You can include forms inside modals for login or contact purposes.
<div class="modal fade" id="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Email:</label>
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<div class="mb-3">
<label class="form-label">Password:</label>
<input type="password" class="form-control" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</div>
7. Manually Open & Close Modal (JavaScript)
You can control modals using JavaScript:
<button class="btn btn-info" onclick="openModal()">Open Modal</button>
<div class="modal fade" id="jsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">JavaScript Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This modal is opened using JavaScript.
</div>
</div>
</div>
</div>
<script>
function openModal() {
var myModal = new bootstrap.Modal(document.getElementById('jsModal'));
myModal.show();
}
</script>
8. Backdrop & Keyboard Control
You can control modal behavior using data attributes or JavaScript:
- Disable backdrop click:
data-bs-backdrop="static" - Disable escape key:
data-bs-keyboard="false"
<div class="modal fade" id="customModal" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Non-dismissible Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This modal cannot be closed by clicking outside or pressing ESC.
</div>
</div>
</div>
</div>
Conclusion
Bootstrap 5 Modals are highly customizable and easy to implement. You can use them for alerts, login forms, full-screen overlays, and more.
Key Features Covered:
✔️ Basic modal
✔️ Centered modal
✔️ Different modal sizes
✔️ Scrollable & full-screen modal
✔️ Modals with forms
✔️ JavaScript-controlled modals
✔️ Non-dismissible modals
Let me know if you need more examples or advanced customizations!
0 comments:
Post a Comment