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
- What does .modal('dispose') do in Bootstrap 4 ?
- How to get the same behavior with confirm and bootstrap modal?
- How to use modal closing event in Twitter Bootstrap ?
- How to use Bootstrap modal for YouTube videos and play automatically ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to design full width dropdown Navbar using Bootstrap ?
- How to change the width and height of Twitter Bootstrap's tooltips?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- How to configure node.js console font ?
- How to Install and Configure MongoDB in Ubuntu?
- How to Install and Configure Docker in Ubuntu?
- How to Install and Configure Fish Shell in Ubuntu?
- How to Install and Configure Apache Subversion(SVN) In Linux?
- How to Configure Socket.IO with Demo-Chat App in Node.js ?
- How to configure XAMPP to send mail from localhost using PHP ?
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.