<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vertical Center Alignment of Bootstrap Modal</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <!-- Button HTML (to Trigger Modal) --> <a href="#modalCenter" role="button" class="btn btn-primary" data-bs-toggle="modal">Vertically Centered Modal</a> <!-- Button HTML (to Trigger Modal) --> <a href="#modalScrollableCenter" role="button" class="btn btn-primary" data-bs-toggle="modal">Vertically Centered Scrollable Modal</a> <!-- Modal HTML --> <div id="modalCenter" class="modal fade" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Alignment Demo</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>The controller component, such as a button or link, and the modal elements itself are generally what are required to activate a Bootstrap modal using data attributes.The Bootstrap grid system offers a quick and effective approach to build adaptable layouts of any size or form. It was constructed using Flexbox with a mobile-first mindset. Moreover, it employs a twelve column structure (12 columns are available per rows) and six preset responsive levels in addition to being fully responsive.Similar to how you may design additional layouts using the aforementioned concept. On desktop and laptop screens, the instance that follows will often provide three column layouts. If the tablet's display resolution is exceed or equals to 992 pixels, it also functions in landscape orientation on tablets (e.g. Apple iPad). The grids columns, however, will remain horizontally in portrait mode.</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">Got it!</button> </div> </div> </div> </div> <!-- Scrollable Modal HTML --> <div id="modalScrollableCenter" class="modal fade" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Alignment Demo</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>A modal, or dialog box or pop-up window, is essentially a window that asks the user to do something before continuing or displays critical information to them. Modals are frequently used to notify users when their sessions are about to expire or to request their final approval before carrying out any crucial operations such storing or removing crucial data.</p> <p>With the help of the Bootstrap modal plugins, you can simply construct sophisticated dialog boxes that are versatile. The instance that follows shows how to put together a straightforward modal window, complete with a header, message content, and actions buttons for the user.</p> <p>If you attempt the aforementioned instance, it will automatically open the modal windows after JavaScript has loaded the DOM completely. This is how the result will appear:Instances of some gorgeously created Bootstrap modals may be seen in the snippets section.Instances of some gorgeously created Bootstrap modals may be seen in the snippets section.</p> <p>The controller component, such as a button or link, and the modal elements itself are generally what are required to activate a Bootstrap modal using data attributes.The Bootstrap grid system offers a quick and effective approach to build adaptable layouts of any size or form. It was constructed using Flexbox with a mobile-first mindset. Moreover, it employs a twelve column structure (12 columns are available per rows) and six preset responsive levels in addition to being fully responsive.Similar to how you may design additional layouts using the aforementioned concept. On desktop and laptop screens, the instance that follows will often provide three column layouts. If the tablet's display resolution is exceed or equals to 992 pixels, it also functions in landscape orientation on tablets (e.g. Apple iPad). The grids columns, however, will remain horizontally in portrait mode.</p> <p>This grids system used by Bootstrap is broken down into its main components inside the tables below.The information will be placed in the columns, which are the real content areas. We will putting all of these ideas in practice and demonstrate how they truly operate inside the parts that follow:The instance that follows will demonstrate how to design two columns layout for middle, big, and extra large devices, including tables, laptops, and desktop computers, among others. Nevertheless, the column will automatically turn horizontally for mobile devices with screens wider than 768 pixels (2 rows, 1 column).</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">Got it!</button> </div> </div> </div> </div> </div> </body> </html>