Bootstrap 3 modal responsive

Question

I have a modal but it s not resizing on smaller screens   tablets  etc    Is there a way to make it responsive   Couldn t find any information on bootstrap docs  Thanks  I update my html code    its inside a django for loop         lt div class  modal fade   id     p id     tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true   gt         lt div class  modal-dialog modal-lg  gt           lt div class  modal-content  gt             lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt               lt h4 class  modal-title  id  myModalLabel  gt Producto lt  h4 gt             lt  div gt             lt div class  modal-body  gt               lt h5 gt Nombre      p name   lt  h5 gt                    lt  div gt             lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cerrar lt  button gt              lt  div gt            lt  div gt         lt  div gt       lt  div gt    I have these css settings    modal-lg     max-width  900px     media  min-width  768px        modal-lg       width  100           media  min-width  992px       modal-lg       width  900px

User · Answer

You should be able to adjust the width using the  modal-dialog class selector  in conjunction with media queries or whatever strategy you re using for responsive design     modal-dialog       width  400px

User · Answer

I had the same problem  and a easy way i found to solve that was to make everything in the modal s body responsive using boostrap classes  and my problem were solved

User · Answer

Old post  I ended up setting media queries and using max-width  YYpx  and width auto  for each breakpoint  This will scale w  images as well  per say you have an image that s 740px width on the md screen   the modal will scale down to 740px  excluding padding for the  modal-body  if applied    lt div class  modal fade  id  bs-button-info-modal  tabindex  -1  role  dialog  aria-labelledby  Button Information Modal  gt       lt div class  modal-dialog modal-dialog-centered  role  document  gt           lt div class  modal-content  gt               lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                   lt span aria-hidden  true  gt  amp times  lt  span gt               lt  button gt               lt div class  modal-body  gt  lt  div gt           lt  div gt       lt  div gt   lt  div gt    Note that I m using SCSS  bootstrap 3 3 7  and did not make any additional edits to the  modals scss file that  bootstrap scss imports  The CSS below is added to an additional SCSS file and imported AFTER  bootstrap scss   It is also important to note that the original bootstrap styles for  modal-dialog is not set for the default 992px breakpoint  only as high as the 768px breakpoint  which has a hard set width applied width  600px   hence why I overrode it w  width  auto     media  min-width   screen-sm-min       this is the 768px breakpoint      modal-dialog           max-width  600px          width  auto            media  min-width   screen-md-min       this is the 992px breakpoint      modal-dialog            max-width  800px            Example below of modal being responsive with an image

User · Answer

I had the same issue I have resolved by adding a media query for  screen-xs-min in less version under Modals less   media  max-width   screen-xs-min       modal-xs   width   modal-sm

User · Answer

From the docs    Modals have two optional sizes  available via modifier classes to be placed on a  modal-dialog  modal-lg and modal-sm  as of 3 1      Also the modal dialogue will scale itself on small screens  as of 3 1 1

[html] Bootstrap 3 modal responsive

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3