Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website’s content rendering as per the requirements.
In this article, we will focus on adjusting the width/height of the modal box.
Method 1: Using pre-defined Bootstrap classes
Bootstrap has pre-defined classes for changing modal dimension attributes to be used with the div element containing .modal-dialog. These are listed below:
- Small-sized modal: .modal-sm
- Medium-sized modal: .modal-md
- Large-sized modal: .modal-lg
Method 2: Using custom dimensions by tampering with default CSS attibutes
We can also customize the width/height of the modal by changing the CSS properties for the div containing .modal-dialog class. Below is the solution for the same.
- 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 configure XAMPP to send mail from localhost using PHP ?
- How to Install and Configure Docker in Ubuntu?
- How to Install and Configure Fish Shell in Ubuntu?
- How to configure node.js console font ?
- How to Install and Configure Apache Subversion(SVN) In Linux?
- How to Install and Configure MongoDB in Ubuntu?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.