CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-modal
Leandro Faria
Leandro Faria

Reputation: 445

Change bootstrap 3 modal width maintaining responsiveness

I just read on this article that you can change bootstrap modal width with this:

.modal .modal-dialog { width: 800px; }

But when I do this, I loose the default responsiveness of the modal.

How can I change the width but keep the responsiveness on mobile?

enter image description here

Upvotes: 2

Views: 2871

Answers (1)

Xahed Kamal
Xahed Kamal

Reputation: 2223

Just use max-width. It will become responsive-

.modal .modal-dialog { width: 800px; max-width:100%; }

Or, You can do it via media queries.

@media only screen and (max-width: 480px) {
    .modal .modal-dialog {
        position:relative;
        width:auto;
        margin: 10px;
    }
}

Upvotes: 6

Related Questions