Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modal width (increase)

I want a modal to be 80% or so of a screen width. modal-lg isn't large enough. This:

.modal .modal-dialog {   width: 80%; } 

Doesn't work with Bootstrap 4.

like image 975
Oleg Antonyan Avatar asked Mar 20 '17 06:03

Oleg Antonyan


People also ask

How can I increase my modal width?

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 you increase modal size in Reactstrap?

The docs reactstrap really bad to explained. Don't forget everyone, you can also do size="xl" . To achieve greater sizes than this, you have to use a stylesheet imported and on the Modal component itself, specifically a property called contentClassName . By writing to a separate file like styles.

How can I make my modal height responsive?

Making your Modal Responsive The most obvious way is to write a bunch of media queries like a chump. I instead suggest using max-width and max-height. When combined with calc() this allows you to have a consistent padding between the modal and the edge of the screen on smaller devices.

What is data dismiss modal?

modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The . close class styles the close button, and the . modal-title class styles the header with a proper line-height.


1 Answers

Bootstrap 3

You can create or just override default bootstrap modal-lgby doing below:

.modal-lg {     max-width: 80%; } 

If not working just add !important so it would look like below

.modal-lg {     max-width: 80% !important; } 

Now call the modal-lg.

<div class="modal-dialog modal-lg" role="document">  <!-- some modal content ---> </div 

For Bootstrap 4 refer to @kitsu.eb answer. Also note that using bootstrap 4 utilities might break the responsiveness.

like image 118
claudios Avatar answered Sep 19 '22 11:09

claudios