How to useBootstrap Modal Component in Bootstrap
Bootstrap’s Modal Component allows direct definition of modal markup in HTML, providing flexibility and customization options. Simply add the modal structure within your HTML, including modal header, body, and footer sections, for easy integration and styling.
Example: In this example we demonstrates a Bootstrap modal. A button triggers the modal, revealing a title, content, and buttons for interaction. It’s styled using Bootstrap’s CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Button to trigger the modal -->
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Modal Title
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>This is the content of the modal. You can add any HTML content here.</p>
</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>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
Output:
How to Create Modal using Bootstrap?
Bootstrap modal box is a UI component that displays content overlaid on the main page. Create it by defining a trigger button with data attributes and structuring the modal in HTML with a unique ID, allowing customization of content and functionality.
Syntax:
<div class="modal"> Contents... <div>
The following approaches will be used to build the basic modal, which is described below:
Table of Content
- Using JavaScript
- By implementing the Data Attribute
- Using Bootstrap Modal Component