Twitter Bootstrap

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.

Example - Basic template

Copy the HTML below to begin working with a minimal Bootstrap & jQWidgets document
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Template</title>
    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQWidgets CSS -->
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <link href="jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
    <h1>Hello, world!</h1>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src=""></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <!-- jQWidgets core JavaScript -->
    <script src="jqwidgets/jqxcore.js"></script>
    <!-- ================================================== -->
    <!-- Add addition JavaScript files here -->
    <script type="text/javascript">
        $(document).ready(function () {
            // your JavaScript code here.

Try it: Basic Template

To use the jQWidgets Bootstrap Theme, add the jqx.base.css and jqx.bootstrap.css to your <head>.
You can find more integration samples on this page: Twitter Bootstrap with jQWidgets Examples
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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, maximum-scale=1.0, user-scalable=no">

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">

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:

Look to the examples for applying these principles to your code.

Grids and full-width layouts

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 .rows.

For more details about the Twitter Bootstrap's Grid system, look at: Grid System.
For more advanced integration examples, look at: Twitter Bootstrap with jQWidgets Examples