DEV Community

The right way to resize Reactstrap's Modal component.

Audiophile on February 12, 2020

The Challenge You're working with reactstrap (bootstrap + react), that good old trusty css library which lets you style your views with ...

Read full post

Trenisha Goslee • May 21 '20

I literally have been struggling with this for two days! Thanks!

Audiophile • May 27 '20

You're welcome!

Jasmeet Singh • Jan 6

so nice , worked smoothly as butter

Just one more question, now that I increased the width

modal is no longer , centered, how to achieve that

attaching image for reference

lolanator • Mar 26 '22 • Edited

Okay so i tried EVERYTHING to try and resize it, this example wouldn't work for me^^

I was trying to override the .modal-dialog class and nothing would work, I realised the syntax had to be the exact same as it was in my developer tools.

so i added @media (min-width: 576px) {
.modal-dialog {
max-width: fit-content;
margin: 1.75rem auto;
}
}
and this worked !!

Sebastián Osorio • Feb 12 '20

Love this post!

Audiophile • Feb 12 '20

Thank you! Glad you like it.

Nick Filippopoulos • Nov 6 '21

Amazing. Nice approach on finding the solution as well!

Serbiaguy96 • May 21 '20

Thanks man! Helped me a lot :)

Pallavi kamboj • Jul 21 '20

HY! thanks for this amazing editorial. One question:- I want to change the font-size of the react header. I tried using contentClassName but that's not working. Please help me with this

Alok Singh • Aug 8

Great post.

For my case, I had to set modalClassName instead of contentClassName. But, this post gave me idea where to check the expected variable.

Alok Singh • Aug 8

If this doesn't work for someone then please check if this css item (width) is being overridden by other css. In this case you may give preference to your css item by adding !important in your css item as below:
.custom-modal-style {
width: 600px !important;
height: 802px !important;
}