title: Create a bootstrap grid column dynamically using jquery
body: <p>I want to generate a bootstrap grid with columns: calss = "col-lg-6" and "col-lg-3".
  here is the html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-lg-3"&gt;
      &lt;img src="../dist/images/test-info.png" alt="TEST-PLAN"/&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-6"&gt;
      &lt;img src="../dist/images/test-details.png" alt="TEST-DETAILS"/&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-3"&gt;
      &lt;img src="../dist/images/test-stats.png" alt="TEST-STATS"/&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However I would like to generate the above grid dynamically, in such a way that when <code>class ="col-lg-6"</code>, it should display the 'TEST-STATS' image with its correct position mentioned in the json below:</p>
  
  <pre><code>var data = [
      {
          "widgetId": "widget_0",
          "title": "Test Info",
          "description": "",
          "type": "info",
          "dataType": "TEST_INFO",
          "position": {
              "col": 1,
              "row": 1,
              "size_x": 1,
              "size_y": 4
          }
      },
      {
          "widgetId": "widget_1",
          "title": "Test Details",
          "description": "",
          "type": "info",
          "dataType": "TEST_DETAILS",
          "position": {
              "col": 2,
              "row": 1,
              "size_x": 2,
              "size_y": 4
          }
      },
      {
  
       "widgetId": "widget_2",
       "title": "Test Stats",
       "description": "",
       "type": "info",
      "dataType": "TEST_STATS",
      "position": {
              "col": 4,
              "row": 1,
              "size_x": 1,
              "size_y": 4
                 }
  }]
  </code></pre>
  
  <p>Every image has its own position to render, so a conditional statement like:</p>
  
  <pre><code>if(class=="col-lg-6")
  {//display image as 'TEST-DETAILS'}
  </code></pre>
  
  <p>how to create a dynamic template and write a javascript function to loop for the classes and display the image according to the position?</p>
  
  <p>Thanks!!</p>