How to Align Modal to Center of the Screen in Bootstrap? Last Updated : 09 Oct, 2024 Comments Improve Suggest changes Like Article Like Report Aligning a modal to the center of the screen in Bootstrap means positioning the modal window vertically and horizontally at the center of the viewport. This can be achieved using Bootstrap's classes like modal-dialog-centered, which ensures the modal appears in the middle, providing a balanced and user-friendly design.Approach:Bootstrap Setup: Load Bootstrap 5's CSS/JS via CDN for styling and enabling modal functionalities.Modal Trigger: Open the modal with a button with data-bs-toggle and data-bs-target attributes.Centering the Modal: Add a modal-dialog-centered class to align the modal in the center of the screen vertically.Example: In this example, we are following the above-explained approach. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Modal</title> <!-- Bootstrap 5 CSS --> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="text-center p-4 m-4"> <!-- Button to trigger modal --> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#infoModal"> Open Modal </button> <!-- Modal --> <div class="modal fade" id="infoModal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body"> This is acentered model. </div> <div class="modal-footer"> <button class="btn btn-secondary" data-bs-dismiss="modal"> Close </button> </div> </div> </div> </div> <!-- Bootstrap 5 JS --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </body> </html> </html> Output: Comment More infoAdvertise with us Next Article How to Center the Text in Bootstrap ? V verma_anushka Follow Improve Article Tags : Bootstrap Technical Scripter 2019 CSS-Misc HTML-Misc JavaScript-Misc JavaScript-Questions +2 More Similar Reads How to align pills to center in Bootstrap ? Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline- 2 min read How to Center the Text in Bootstrap ? To center text in Bootstrap, you can use the class "text-center" on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts. Table of Cont 2 min read How to Align navbar logo to the left screen using Bootstrap ? It is very easy in Bootstrap to align items left and right by using the bootstrap classes. By default, it sets to left. If you want to align items center or right then it will be done by yourself. To align the navbar logo to the left of the screen with the Bootstrap method is a quick trick that can 2 min read How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl 3 min read How to Align Navbar Items to Center using Bootstrap 4 ? Aligning navbar items to the center using Bootstrap refers to the practice of positioning navigation links in the middle of the navigation bar for a balanced and aesthetic design. Bootstrap's utility classes make it easy to implement this alignment responsively and efficiently.There are some common 2 min read How to set the button alignment in Bootstrap ? Bootstrap buttons are no different from any other DOM elements of an HTML document. Aligning them is more likely the same as aligning paragraphs, divs and sections. Here are some of the scenarios that one can encounter.Here we are using some common methods:Table of ContentButtons in container classB 4 min read Like