Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase Bootstrap Modal Width?

i've tried this but gone wrong

here's the css

body .modal-ku { width: 750px; } 

and here's the failed result

enter image description here

like image 841
Damara Jati P Avatar asked Dec 01 '15 07:12

Damara Jati P


People also ask

How do I make bootstrap modal wider?

Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.

How do I change the width of a modal?

Answer: Set width for . modal-dialog element Similarly, you can override the width property of . modal-sm , . modal-lg and . modal-xl class to resize the small, large and extra-large modal dialog box respectively.

How do I change the height of a bootstrap modal?

modal max-height is 100vh . Then for . modal-body use calc() function to calculate desired height. In above case we want to occupy 80vh of the viewport, reduced by the size of header + footer in pixels.


1 Answers

In your code, for the modal-dialog div, add another class, modal-lg:

<div class="modal-dialog modal-lg"> 

Or if you wanna centre your modal dialog, use:

.modal-ku {   width: 750px;   margin: auto; } 
like image 58
Praveen Kumar Purushothaman Avatar answered Sep 29 '22 07:09

Praveen Kumar Purushothaman