title: How to add dynamically created Checkboxes to Bootstrap row
body: <p>I have added a bootstrap row. Now inside that I want to add checkbox such that checkboxes should display side by side not as line by line as it is now. Here is the HTML.</p>
  
  <pre><code>&lt;div class="row" id="ReportRow"&gt;
          &lt;div class="col-md-12"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the jquery</p>
  
  <pre><code>var Reports = "User, Admin, Detail, Summary";
  var arrReportscheckBoxItems = Reports.split(',');
  var reportscheckBoxhtml = ''
  for (var i = 0; i &lt; arrReportscheckBoxItems.length; i++) {
        reportscheckBoxhtml += '&lt;label style="font-weight: 600; color: #00467f !important;"&gt;&lt;input type="checkbox" value=' + arrReportscheckBoxItems[i] + '&gt;' + arrReportscheckBoxItems[i] + '&lt;/label&gt;&lt;br\&gt;';
  }
  $('#ReportRow').html(reportscheckBoxhtml);
  </code></pre>
  
  <p>Plesae help me to align it properly. Thanks.</p>