How to make javascript widget responsive using bootstrap?

Bootstrap automatically adapts your pages for various screen sizes.You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Bootstrap is very powerful framework it will provide you different tipes of modules.

hear we talk about grid module which has ability to change content size based on screen size.

you can also do same thing without bootstrap, using CSS i.e provide div width in % .

Document of bootstrap grid system

Bootstrap Grid system starts with 1 -12  numbers based on number it will change the box size depending on screen of your system.

it also support different types of screens.

• mobile (xs,sm)
• desktop (md,lg)
• tablet (md)

Example

<div class="col-md-12"></div> (100% of screen size)

<div class="col-md-6"></div> (Half of screen size)

etc

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to columns as the device or viewport size increases.

div { position: relative; padding-top: SEE BELOW width:%; }

then apply this to the Iframe:

div iframe { position: absolute; top:0px; left:0px; width:%; height:%; }

by using the grid system of bootstrap

<div class="grid-stack"><div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content"></div></div><div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"><div class="grid-stack-item-content"></div></div></div><script type="text/javascript"> $(function () { var options = { cell_height: 80, vertical_margin: 10 }; $('.grid-stack').gridstack(options); }); </script>