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 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 Install and Configure MongoDB in Ubuntu?
- How to configure node.js console font ?
- How to Install and Configure Docker 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.