Search code examples
twitter-bootstrapbootstrap-modal

Boostrap modal width is not working for responsive theme

Please don't delete or close this question I put my question here after full three days search.

My responsive website has many modals to display blocks of data. The modal works fine with the default width on browser and small devices.

When I increase modal width for browsers with in % (percentage) it works fine in only browser. But do not display properly in mobile phones and other devices.

I tried % with min-width etc etc but no luck... also boostrap modal documentation has no information regarding size. only there is a small and large size is available which do not fit to my requirements.

Secondly I am oppening the modals using JS code as:

$(".modal-body").html("Loading...");
        $(".modal-body").load("fdeed.php");
        $("#modal_appointments").modal();
        $('#modal_appointments').modal('show');

modal with 50% width, works fine in normal browser size

Please, help me how I change the width so that it works fine in all devices. Any kind of help is highly appreciated. Thank you.

Solution

  • If you are on bootstrap 3.1.0 try using the bootstrap provided classes, to use the modal in smaller devices. I've personally never tested it in Extremely Small device. Try the following classes with the .modal-dialog class

    .modal-sm - for small devices.

    .modal-lg - for larger devices.

    A useful link

    http://codepen.io/SitePoint/pen/KkHyw

    Hope it helps,