Bootstrap 5 Modal Components
Last Updated :
24 Jul, 2024
A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. A modal is made up of components like the dialog, content, header, title, body, and footer. A modal can be used to implement a lot of utilities like showing a message or popping open the logging-in portal.
Bootstrap 5 Modal Components: To create a modal you will need multiple components, like a header, body, footer, etc. Each component has it's own class and all the components that can be used to create a modal are described below with the class.
- Modal: To create a modal we need to use the basic class of .modal first.
- Modal Dialog: It encloses the total modal dialog box to create a dialog use .modal-dialog class.
- Modal Content: The .modal-content class is used to put the content in the modal, which contains the header, title, body & footer(optional).
- Modal Header: The .modal-header class specifies the header that holds the title part, closing button, or maybe an avatar or image too.
- Modal Title: The modal header contains the title of the modal to put the modal we need to use the .modal-title class
- Modal Body: This is one of the components in modal, to put a body in you need to use the .modal-body class.
- Modal Footer(Optional): The .modal-footer class specifies the total footer that holds the control buttons which might include closing buttons or submit buttons or maybe saving changes button.
Syntax:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<!-- Modal title goes Here --!>
</h5>
</div>
<div class="modal-body">
<!-- Modal body text goes here --!>
</div>
<div class="modal-footer">
<!-- Modal Footer text goes here --!>
</div>
</div>
</div>
</div>
Example 1: The code below demonstrates how we can use the different components of a modal.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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.bundle.min.js">
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Modal components
</strong>
<br>
<!-- Button Trigger Modal -->
<button type="button"
class="btn btn-lg btn-success"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is main modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<div id="text">
<p>
A data structure is a storage that is used
to store and organize data.
</p>
<p>
It is a way of arranging data on a computer so that
it can be accessed and updated efficiently.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can use the different components of a modal and also add dynamic heights to a modal using jQuery.
Note: Here in this example, we used display: none; property, .d-none class will not work in this case
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function () {
$("#showText").click(function () {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Modal Components
</strong>
<br>
<!-- Button Trigger Modal -->
<button type="button"
class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
<!-- The Modal -->
<div id="myModal" class="modal fade"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
In this modal dynamic heights is added by jQuery.
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>
<button type="button"
id="showText"
class="btn btn-link">
Click here to see more about jQuery.
</button>
</p>
<div style="display: none;" id="text">
<p>
jQuery is an open source JavaScript library
that simplifiesthe interactions between an
HTML/CSS document
</p>
<p>
Elaborating the terms, jQuery simplifies HTML
document traversing and manipulation, browser
event handling, DOM animations etc
</p>
<p>
jQuery is widely famous with its philosophy of
“Write less, do more.” This philosophy can be
further elaborated as three concepts:
</p>
<ol>
<li>
<p>
Finding some elements
(via CSS selectors) and doing something
with them (via jQuery methods)
</p>
</li>
<li>
<p>
Chaining multiple jQuery methods on a set
of elements Using the jQuery wrapper and
implicit iteration
</p>
</li>
</ol>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#modal-components
Similar Reads
Bootstrap 5 Modal Components A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. A modal is made up of components like the dialog, content, header, title, body, and footer. A modal can be used to implement a lot of utilities like showing a message or poppi
4 min read
Bootstrap 5 Modal Live demo Bootstrap 5 Modal live demo demonstrates the toggle of a working modal by clicking a button that opens a modal. The modal content slides down but fades in from the top after the toggle action. Different components are assembled together to create a Modal. Modals can be triggered using the data attri
3 min read
Bootstrap 5 Modal Static backdrop Bootstrap 5 Modal Static backdrop facilitates the modal that will not be going to be closed while clicking outside of the modal, by setting the backdrop to static. Modal Static backdrop Classes: There are no specific classes used in Modal Static backdrop. Although, we can create the modal using Moda
2 min read
Bootstrap 5 Modal Scrolling long content Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable. Modals can either be scrolled independently of the page or we can scroll the modal body. We will learn about them using examplesSyntax:<div class="modal-dialog modal-dialog-scro
2 min read
Bootstrap 5 Modal Vertically Centered Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead. Using bootstrap modal classes we can make the modal body align vertica
3 min read
Bootstrap 5 Modal Tooltips and Popovers Bootstrap 5 provides a robust way to enhance user interfaces through modals, tooltips, and popovers. These components help in displaying additional information to users without cluttering the main content. Tooltips offer brief descriptions, while popovers can contain more detailed information. Both
4 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 Varying Modal Content Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. Bootstrap 5
4 min read
Bootstrap 5 Toggle Between Modals Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.Bootstrap 5 Toggle be
3 min read
Bootstrap 5 Modal Change Animation Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal. The Modal opens with a fade-in animation when it is triggered using a button, although, this animati
4 min read