Scrolling content with more length than the viewport :
When the content in the modal is more than the user’s viewport, the modals become scrollable, and they scroll independent to that of the page. The source code remains the same as above.
Vertically centered Modal :
To vertically center a modal, you should add a ‘modal-dialog-centered’ class to the div that has ‘modal-dialog’ class.
Modals of different sizes :
You can use different sizes for your modals. Add one of the following classes to the div having ‘modal-dialog’ class. Below is a table describing the different sizes provided by Bootstrap. You can also use custom sizes using JS or CSS.
- How to configure modal width in Bootstrap?
- Bootstrap 4 | Modal
- How to get the same behavior with confirm and bootstrap modal?
- How to use Bootstrap modal for YouTube videos and play automatically ?
- What does .modal('dispose') do in Bootstrap 4 ?
- How to use modal closing event in Twitter Bootstrap ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to open or close react-bootstrap modal pro-grammatically?
- How to change the position of modal close button in bootstrap?
- How to fit the image into modal popup using Bootstrap?
- Bootstrap 5 Modal
- How to pass data into a bootstrap modal?
- How to create a responsive Modal Sign-Up form for a Website?
- HTML | Responsive Modal Login Form
- How to Align modal content box to center of any screen?
- Bulma | Modal
- How to open a different modal that is inside of a list ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.