Bootstrap has become one of the most popular open source projects in the world. It is very convenient for creating Responsive Web Pages. Bootstrap automatically adapts your pages for various screen sizes.In this help topic, we will show you how to use the Bootstrap and its Responsive Features with jQWidgets.
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. Overall we don't recommend this on every site, so use caution!
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. <img src="..." class="img-responsive" alt="Responsive image">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
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. Here's how the Bootstrap grid system works:
.containerfor proper alignment and padding.
.col-xs-4are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
padding. That padding is offset in rows for the first and last column via negative margin on
Look to the examples for applying these principles to your code.
Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with
padding: 0 15px; to offset the
margin: 0 -15px; used on