Shawon Amos

Here's what it looks like: :The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were  show ing your modal using js: $ ( '#myModal' ). appendTo ( "body" ). modal ( 'show' ); Or, if you launch modal using buttons, drop the  .modal('show');  and just do: $ ( '#myModal' ). appendTo ( "body" ) This will keep all normal functionality, allowing you to show the modal using a button.

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media ( min-width : 1281 px ) { //CSS } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */ @media ( min-width : 1025 px ) and ( max-width : 1280 px ) { //CSS } /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */ @media ( min-width : 768 px ) and ( max-width : 1024 px ) { //CSS } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ @media ( min-width : 768 px ) and ( max-width : 1024 px ) and ( orientation : landscape ) { //CSS } /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */ @media ( min-width : 481 px ) and ( max-width : 767 px ) { //CSS } /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */ @media ( min-width : 320 px ) and ( max...