Menu
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.
975
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.
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.
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.
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.
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.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
