In Bootstrap 5.3, the Modal component allows you to create pop-up windows that display content on top of the current page. Modals are commonly used for displaying additional information, collecting user input, or providing important messages.
To use the Modal component in Bootstrap 5.3, follow these steps:
Create a Modal container
Start by creating a container element, such as a <div>, that will hold the content of your Modal. Give it a unique ID to reference it later.
Add a Modal trigger
Include an element (e.g., a button or a link) that will trigger the Modal to open. Set its data-bs-toggle attribute to "modal", and specify the ID of the Modal container in the data-bs-target attribute.
Configure the Modal
Inside the Modal container, include the necessary elements for your Modal content, such as a header, body, and footer. Customize the content as needed. Add the modal-content class to the container that holds the Modal content.
Include the necessary Modal classes
Add the modal class to the Modal container and set its tabindex attribute to "-1". Add the modal-dialog class to a child container that will house the Modal dialog. Inside the dialog, add the modal-content class to another container that will hold the actual Modal content.
Optionally, customize the Modal size
Bootstrap provides different classes for adjusting the size of Modals. You can add modal-lg for a large Modal or modal-sm for a small Modal to the modal-dialog container.
Here's an example of how to create a basic Modal in Bootstrap 5.3:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Basic Modal</button> <div class="modal fade" id="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
In Bootstrap 5.3, you can create a static modal by removing the animation and backdrop functionality. A static modal does not close automatically when clicking outside of it or pressing the Esc key. It remains visible until you explicitly close it.
To create a static modal in Bootstrap 5.3, you can modify the default behavior by adding the data-bs-backdrop="static" attribute to the modal element and removing the fade class. Additionally, you can remove the close button (data-bs-dismiss="modal") from the modal header if you want to prevent closing through that button.
Here's an example of a static modal in Bootstrap 5.3
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">Static Modal</button> <div class="modal fade" id="modal2" data-bs-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
In this example, the modal element has the data-bs-backdrop="static" attribute, which makes it static. Additionally, the fade class has been removed to disable the fade animation.
The modal will remain open until explicitly closed by clicking the "Close" button or using custom JavaScript to handle the close functionality.
By modifying the default behavior of the modal, you can create static modals in Bootstrap 5.3 that stay visible until the user explicitly closes them, providing a non-dismissable modal experience.
In Bootstrap 5.3, you can use the modal-dialog-scrollable class to create a scrollable modal dialog. This class allows the content within the modal dialog to scroll when it exceeds the available height.
Here's an example of a static modal in Bootstrap 5.3
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal3">Scrollable Modal</button> <div class="modal fade" id="modal3" data-bs-backdrop="static"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error amet aliquam harum numquam suscipit illum quis deleniti placeat laborum, nulla natus debitis inventore corrupti sequi, nobis beatae porro ut quae nostrum impedit quam neque! Quibusdam ut inventore magni earum minus corporis quia tempore voluptatem consectetur? A, cumque alias magni non tenetur porro iure vero fugiat consectetur! Tenetur ipsa nihil laudantium cumque quam. Libero, laborum. Quam ex, animi nemo iusto necessitatibus commodi reprehenderit suscipit incidunt pariatur cumque sit molestiae ipsum quae vel velit dolores architecto qui doloremque at ad assumenda rem fugit. Distinctio excepturi, illo quasi quia praesentium qui fuga eaque. Modi ratione quaerat vitae nobis ab enim illum, sequi voluptatibus natus quo doloremque quam, eaque laborum eligendi ullam temporibus dignissimos minima animi obcaecati a. Tempore ea, nostrum obcaecati ratione dolor provident delectus amet? Aspernatur aut praesentium natus incidunt corrupti necessitatibus tempore inventore voluptatem odit voluptate velit alias harum quas exercitationem distinctio, quis minima dignissimos soluta eaque repellat, ratione culpa explicabo reprehenderit aliquid. Eveniet, aperiam aspernatur? Molestiae enim quidem quos minus ipsam, eveniet consequatur explicabo obcaecati, odio necessitatibus, corporis aut esse. Veniam libero ab ullam expedita velit delectus, explicabo totam earum quia cupiditate obcaecati distinctio corporis molestias qui tenetur alias recusandae pariatur ex esse. Autem rerum culpa deserunt vero rem nam laborum modi maiores voluptatum voluptatibus corporis ratione sequi esse ab a deleniti quaerat numquam ut adipisci illo, ipsam alias? Laboriosam, libero aspernatur. Similique quas beatae rem sequi nesciunt omnis. Quam distinctio dicta quos commodi pariatur sit. Nam maxime recusandae non modi suscipit nisi molestias magnam porro, dolor officiis facere, odit vel cumque asperiores laboriosam omnis excepturi explicabo delectus exercitationem voluptas, ducimus vero repudiandae? Sunt dolor fuga sed! Perspiciatis nostrum impedit dignissimos mollitia facilis quo quod quaerat, eligendi autem porro enim qui vitae cupiditate! Enim delectus similique, consequuntur soluta minima magnam eum vitae placeat sint optio quis repellat, dolore nobis perferendis distinctio temporibus earum tempore nihil accusantium itaque minus! Optio voluptatibus commodi necessitatibus, nisi labore corrupti assumenda odit hic eius a accusantium, nihil provident qui ex autem neque fuga aliquam! Animi blanditiis, cum eum perspiciatis sequi corporis explicabo tempora optio sit id possimus expedita minima facere recusandae porro dolore impedit dolores voluptatum et? Reiciendis porro nemo soluta aliquam praesentium! Perferendis ratione cumque nemo harum. Natus odio perferendis deleniti reprehenderit, doloribus maiores, iusto veniam sapiente, porro ratione eius? Labore, adipisci. Minus in nihil vitae excepturi! Aliquam iusto reprehenderit atque tempora, doloribus aspernatur. Reiciendis obcaecati exercitationem facilis neque temporibus adipisci. Eaque, suscipit. Eos minima, aliquam in earum qui repudiandae facere odit dignissimos pariatur accusamus assumenda veritatis, doloremque aperiam iusto eum, cupiditate maxime voluptatibus reiciendis porro rem cumque nisi et. Veritatis amet sequi quos consequatur totam illo in laboriosam omnis nisi corporis porro nesciunt laborum, cumque dolorum quibusdam delectus qui quasi blanditiis sint. Rerum minima mollitia iure doloremque voluptatum sint? Nam id atque eius iusto reprehenderit consectetur nihil architecto eum, quidem similique libero reiciendis incidunt modi totam odit expedita a tempora dolorem hic magnam ipsa illo. Qui debitis maxime laborum impedit enim, earum voluptatum. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
In Bootstrap 5.3, you can use the modal-dialog-scrollable class to create a scrollable modal dialog. This class allows the content within the modal dialog to scroll when it exceeds the available height.
In Bootstrap, you can create a centered modal by applying the "modal-dialog-centered" class to the modal dialog container. This class aligns the modal vertically and horizontally in the middle of the viewport.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal4">Basic Modal</button> <div class="modal fade" id="modal4"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
In this example, the modal dialog container has the class "modal-dialog-centered". This class vertically and horizontally centers the modal within the viewport.
When you click the "Open Modal" button, the modal will appear in the center of the screen.
By using the "modal-dialog-centered" class, you can easily create a centered modal in Bootstrap, ensuring that the modal is displayed prominently and maintains a clean and visually pleasing appearance.
In Bootstrap, you can adjust the size of a modal by adding additional classes to the modal dialog container. Bootstrap provides classes to create small (modal-sm), large (modal-lg), or extra-large (modal-xl) modals
<button class="btn btn-primary" data-bs-target="#extra_large" data-bs-toggle="modal">Extra Large Modal</button> <button class="btn btn-primary" data-bs-target="#large" data-bs-toggle="modal">Large Modal</button> <button class="btn btn-primary" data-bs-target="#small" data-bs-toggle="modal">Small Modal</button> <div class="modal fade" id="extra_large"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Extra Large Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="large"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Large Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="small"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Small Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
You can also combine the size classes with other classes and custom styles to further customize the appearance and layout of the modals according to your needs.
<!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" /> <title>Modal</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="base.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" /> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-8"> <p class="fw-semibold text-primary">Modal in Bootstrap</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Basic Modal</button> <div class="modal fade" id="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <hr /> <p class="fw-semibold text-primary">Static Modal in Bootstrap</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">Static Modal</button> <div class="modal fade" id="modal2" data-bs-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <hr /> <p class="fw-semibold text-primary">Scrollable Modal in Bootstrap</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal3">Scrollable Modal</button> <div class="modal fade" id="modal3" data-bs-backdrop="static"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error amet aliquam harum numquam suscipit illum quis deleniti placeat laborum, nulla natus debitis inventore corrupti sequi, nobis beatae porro ut quae nostrum impedit quam neque! Quibusdam ut inventore magni earum minus corporis quia tempore voluptatem consectetur? A, cumque alias magni non tenetur porro iure vero fugiat consectetur! Tenetur ipsa nihil laudantium cumque quam. Libero, laborum. Quam ex, animi nemo iusto necessitatibus commodi reprehenderit suscipit incidunt pariatur cumque sit molestiae ipsum quae vel velit dolores architecto qui doloremque at ad assumenda rem fugit. Distinctio excepturi, illo quasi quia praesentium qui fuga eaque. Modi ratione quaerat vitae nobis ab enim illum, sequi voluptatibus natus quo doloremque quam, eaque laborum eligendi ullam temporibus dignissimos minima animi obcaecati a. Tempore ea, nostrum obcaecati ratione dolor provident delectus amet? Aspernatur aut praesentium natus incidunt corrupti necessitatibus tempore inventore voluptatem odit voluptate velit alias harum quas exercitationem distinctio, quis minima dignissimos soluta eaque repellat, ratione culpa explicabo reprehenderit aliquid. Eveniet, aperiam aspernatur? Molestiae enim quidem quos minus ipsam, eveniet consequatur explicabo obcaecati, odio necessitatibus, corporis aut esse. Veniam libero ab ullam expedita velit delectus, explicabo totam earum quia cupiditate obcaecati distinctio corporis molestias qui tenetur alias recusandae pariatur ex esse. Autem rerum culpa deserunt vero rem nam laborum modi maiores voluptatum voluptatibus corporis ratione sequi esse ab a deleniti quaerat numquam ut adipisci illo, ipsam alias? Laboriosam, libero aspernatur. Similique quas beatae rem sequi nesciunt omnis. Quam distinctio dicta quos commodi pariatur sit. Nam maxime recusandae non modi suscipit nisi molestias magnam porro, dolor officiis facere, odit vel cumque asperiores laboriosam omnis excepturi explicabo delectus exercitationem voluptas, ducimus vero repudiandae? Sunt dolor fuga sed! Perspiciatis nostrum impedit dignissimos mollitia facilis quo quod quaerat, eligendi autem porro enim qui vitae cupiditate! Enim delectus similique, consequuntur soluta minima magnam eum vitae placeat sint optio quis repellat, dolore nobis perferendis distinctio temporibus earum tempore nihil accusantium itaque minus! Optio voluptatibus commodi necessitatibus, nisi labore corrupti assumenda odit hic eius a accusantium, nihil provident qui ex autem neque fuga aliquam! Animi blanditiis, cum eum perspiciatis sequi corporis explicabo tempora optio sit id possimus expedita minima facere recusandae porro dolore impedit dolores voluptatum et? Reiciendis porro nemo soluta aliquam praesentium! Perferendis ratione cumque nemo harum. Natus odio perferendis deleniti reprehenderit, doloribus maiores, iusto veniam sapiente, porro ratione eius? Labore, adipisci. Minus in nihil vitae excepturi! Aliquam iusto reprehenderit atque tempora, doloribus aspernatur. Reiciendis obcaecati exercitationem facilis neque temporibus adipisci. Eaque, suscipit. Eos minima, aliquam in earum qui repudiandae facere odit dignissimos pariatur accusamus assumenda veritatis, doloremque aperiam iusto eum, cupiditate maxime voluptatibus reiciendis porro rem cumque nisi et. Veritatis amet sequi quos consequatur totam illo in laboriosam omnis nisi corporis porro nesciunt laborum, cumque dolorum quibusdam delectus qui quasi blanditiis sint. Rerum minima mollitia iure doloremque voluptatum sint? Nam id atque eius iusto reprehenderit consectetur nihil architecto eum, quidem similique libero reiciendis incidunt modi totam odit expedita a tempora dolorem hic magnam ipsa illo. Qui debitis maxime laborum impedit enim, earum voluptatum. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <hr /> <p class="fw-semibold text-primary">Centered Modal in Bootstrap</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal4">Basic Modal</button> <div class="modal fade" id="modal4"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title fs-5">Modal Title</div> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <h5 class="p-2">Sample Heading</h5> <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo quo velit, tempora tenetur natus est distinctio vel iusto laborum qui alias numquam placeat reprehenderit expedita illum saepe! Voluptas, ducimus id.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save Changes</button> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <hr /> <p class="fw-semibold text-primary">Toggle between modals</p> <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">Show a second modal and hide this one with the button below.</div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button> </div> </div> </div> </div> <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body">Hide this modal and show the first with the button below.</div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button> </div> </div> </div> </div> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button> <hr /> <p class="fw-semibold text-primary">Modal Size in Bootstrap</p> <button class="btn btn-primary" data-bs-target="#extra_large" data-bs-toggle="modal">Extra Large Modal</button> <button class="btn btn-primary" data-bs-target="#large" data-bs-toggle="modal">Large Modal</button> <button class="btn btn-primary" data-bs-target="#small" data-bs-toggle="modal">Small Modal</button> <div class="modal fade" id="extra_large"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Extra Large Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="large"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Large Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="small"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">Small Modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aliquam numquam ex est hic fugiat aut. Dolorem, rem voluptate quasi dicta unde eaque, fuga qui iste exercitationem nesciunt suscipit?.</div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <!--col--> </div> </div> <!--Container End--> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>Live Preview
Remember to include the necessary Bootstrap CSS and JavaScript files to ensure the Modal component works properly.With the Modal component in Bootstrap 5.3, you can create versatile pop-up windows to enhance user interaction and display additional content in a clean and organized manner.
Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions