Last Updated on January 9, 2025 by Roshan Parihar
Learn how to increase modal width in Bootstrap 5 and other versions. You have to just add some class or CSS to customize the modal sizes. Let’s find out with the examples given below.
Increase Modal Width in Bootstrap 5
To increase modal with in Bootstrap 5, You have to add the class .modal-sm for small, .modal-lg for large, .modal-xl for extra-large, and .modal-fullscreen for fullscreen to the div containing class .modal-dialog.
Test it Live
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!-- SMALL Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MyModalSmall"> Small Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalSmall" tabindex="-1" aria-labelledby="MyModalSmallLabel" aria-hidden="true"> <!-- Add .modal-sm for SMALL modal --> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">SMALL Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- LARGE Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MyModalLarge"> Large Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalLarge" tabindex="-1" aria-labelledby="MyModalLargeLabel" aria-hidden="true"> <!-- Add .modal-lg for LARGE modal --> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">LARGE Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- EXTRA LARGE Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MyModalExtraLarge"> Extra Large Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalExtraLarge" tabindex="-1" aria-labelledby="MyModalExtraLargeLabel" aria-hidden="true"> <!-- Add .modal-xl for EXTRA LARGE modal --> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">EXTRA LARGE Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- FULLSCREEN Modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MyModalFullscreen"> Fullscreen Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalFullscreen" tabindex="-1" aria-labelledby="MyModalFullscreenLabel" aria-hidden="true"> <!-- Add .modal-fullscreen for FULLSCREEN modal --> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">FULLSCREEN Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
When you click the buttons given above, you will get the live preview where you can check the different width of modal in Bootstrap 5.
Change or Increase Modal Width in Bootstrap 4
Bootstrap 4 comes with classes .modal-sm for small, .modal-lg for large, .modal-xl for extra-large. You have to add the class to the div having class .modal-dialog.
Bootstrap 4 does not have any class for making the modal fullscreen. However, you can add some CSS as given below to make the modal fullscreen.
Test it Live
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<!-- SMALL Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModalSmall"> Small Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalSmall" tabindex="-1" aria-labelledby="MyModalSmallLabel" aria-hidden="true"> <!-- Add .modal-sm for SMALL modal --> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">SMALL Modal Heading</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- LARGE Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModalLarge"> Large Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalLarge" tabindex="-1" aria-labelledby="MyModalLargeLabel" aria-hidden="true"> <!-- Add .modal-lg for LARGE modal --> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">LARGE Modal Heading</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- EXTRA LARGE Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModalExtraLarge"> Extra Large Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalExtraLarge" tabindex="-1" aria-labelledby="MyModalExtraLargeLabel" aria-hidden="true"> <!-- Add .modal-xl for EXTRA LARGE modal --> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">EXTRA LARGE Modal Heading</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> <!-- FULLSCREEN Modal --> <style> #MyModalFullscreen .modal-dialog { max-width: 100%; margin: 0; top: 0; bottom: 0; left: 0; right: 0; height: 100vh; display: flex; } </style> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModalFullscreen"> Fullscreen Modal </button> <!-- Modal --> <div class="modal fade" id="MyModalFullscreen" tabindex="-1" aria-labelledby="MyModalFullscreenLabel" aria-hidden="true"> <!-- Add .modal-fullscreen for FULLSCREEN modal --> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">FULLSCREEN Modal Heading</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
You can click the above button to see the live preview of different modal width.
Custimize Size in Bootstrap 3
There are only two classes present in Bootstrap 3 to customize the modal size. These classes are .modal-sm for small modal and .modal-lg for large modal.
However, there are no classes present for extra large and fullscreen modal size. But, you can add some CSS as given below to make the modal size extra large and fullscreeen.
Test it Live
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!-- SMALL Modal --> <button type="button" class="btn btn-primary" data-target="#MyModalSmall" data-toggle="modal">Small Modal</button> <!-- .modal --> <div class="modal fade" id="MyModalSmall"> <!-- Add .modal-sm for SMALL modal --> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Small Modal Heading</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- LARGE Modal --> <button type="button" class="btn btn-primary" data-target="#MyModalLarge" data-toggle="modal">Large Modal</button> <!-- .modal --> <div class="modal fade" id="MyModalLarge"> <!-- Add .modal-lg for LARGE modal --> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Large Modal Heading</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- EXTRA LARGE Modal --> <style> @media (min-width: 768px) { #MyModalExtraLarge .modal-dialog { width: 90%; max-width:1200px; } } </style> <button type="button" class="btn btn-primary" data-target="#MyModalExtraLarge" data-toggle="modal">Large Modal</button> <!-- .modal --> <div class="modal fade" id="MyModalExtraLarge"> <!-- Add .modal-lg for EXTRA LARGE modal --> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Extra Large Modal Heading</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- FULLSCREEN Modal --> <style> #MyModalFullscreen .modal-dialog { width: 100%; max-width: none; margin: 0; } #MyModalFullscreen .modal-content { height: 100vh; /* Full viewport height */ } </style> <button type="button" class="btn btn-primary" data-target="#MyModalFullscreen" data-toggle="modal">Fullscreen err Modal</button> <!-- .modal --> <div class="modal fade" id="MyModalFullscreen"> <!-- Add .modal-lg for FULLSCREEN modal --> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Fullscreen Modal Heading</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
To check the modal sizes in Bootstrap 3, you can click the buttons given above to see the different modal sizes.