How to Create Modal using Bootstrap?
Last Updated :
26 Jul, 2024
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:
Approach 1: Using JavaScript
This approach involves using JavaScript to control the modal dynamically. You can create an instance of the Modal class and use its methods to display or hide the modal. You can also attach event listeners to buttons or elements to activate the modal upon user interactions.
Syntax:
// Create an instance of the Modal class
let myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
myModal.hide();
Example: In this example, we will use javascript for creating a modal.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="header">
<h5>
Bootstrap Modal Via JavaScript
</h5>
</div>
<button class="btn btn-success"
onclick="showModal()">
Show Modal
</button>
<div id="gfg" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
GeeksforGeeks
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>
It is a dialog box/popup window that is
displayed on top of the current page.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<script>
let modal =
new bootstrap.Modal(document.getElementById('gfg'));
function showModal() {
modal.show();
}
</script>
</body>
</html>
Output:
Modal using Bootstrap Example OutputApproach 2: By implementing the Data Attribute
Bootstrap provides the option to trigger a modal using data attributes directly in the HTML. You can add the data-bs-toggle attribute with the value modal to an element that should trigger the modal. Additionally, the data-bs-target attribute is used to specify the target modal's id. This allows for seamless integration without the need for explicit JavaScript code.
Syntax:
<button data-bs-toggle="modal"
data-bs-target="#myModal">
Open Modal
</button>
Example: In this example, we will use data attributes for creating the modal.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="w-80 p-3">
<div>
<h3>
Bootstrap Modal Via Data Attributes
</h3>
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#GFG">
Show Modal
</button>
<div class="modal fade" id="GFG">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>I am a Modal</p>
<p>
Bootstrap Modal Via Data Attributes
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Modal using Bootstrap Example OutputApproach 3: Using Bootstrap Modal Component
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.
HTML
<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
Output:
Modal using Bootstrap Example Output
Similar Reads
How to create Jumbotron using Bootstrap 5 ?
Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor's attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value. Uses of Jumbotron: Image showcaseHighlightin
2 min read
Create a To Do List using Bootstrap 5
A To-Do List is a tool for organizing tasks, allowing users to list, prioritize, and manage their activities, ensuring efficiency and productivity in completing them. Here we will create a ToDo list using Bootstrap. We will create our layout or component using Bootstrap predefined utilities and comp
3 min read
How to Create Multipage Website Using Bootstrap?
To create a multipage website using Bootstrap and HTML structure utilize Bootstrap's navbar component to create navigation links between pages. Incorporate Font Awesome icons for visual enhancements and use Bootstrap classes for responsive design. Output Preview: ApproachFirst, create a basic HTML s
5 min read
Bootstrap 5 Modal Using the Grid
Bootstrap 5 Modal Using the grid can add content which can be anything from text to images to anything we want. We can also create layouts inside a modal too, Grid System being one of the main tools for creating responsive layout modals. So we can add different settings and variations of the Grid Sy
3 min read
Bootstrap 5 Modal Passing options() Method
Bootstrap 5 Modal can be triggered in two ways using data attributes and using JavaScript. Options are introduced to the modal to add other utilities and attributes, such as the ability to display a background image while the modal is active. The implementation of these Options through JavaScript is
3 min read
How to configure modal width in Bootstrap?
Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website's content rendering as per the requirements. In this article, we will focus on adjusting the width/height of the modal box.Method 1: Using pr
2 min read
How to create bootstrap panel with footer ?
Bootstrap is a free open source tool for designing modern and responsive websites and web applications. It is the most popular tool for developing websites that are responsive and also beautiful. Bootstrap Panels are boxes with or without a border. You may want to put your contents inside some boxes
2 min read
Bootstrap 5 Modal toggle() Method
The Bootstrap 5 Modal toggle() method is used to directly toggle a modal i.e. show or hide. This method shows the result before the show or hide event occurs. Syntax:modal.toggle()Return Value: The user receives a direct response from this method before the modal is ever displayed or hidden. Example
2 min read
How to create multi step progress bar using Bootstrap ?
In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen
4 min read
How to Create Alerts in Bootstrap ?
Bootstrap Alerts offer a simple method for crafting predefined messages, enhancing their appeal to users. They streamline message display, adding style for increased engagement and improved user experience by presenting important information effortlessly and appealingly. Syntax:<div class="alert
3 min read