How to create a dynamic bootstrap grid by using json data from a URL?

I want to display the above dynamic data by using bootstrap grid . The data is in Json format from a  server side URL. Json format data is as below.

 [{"DISPLAY_NAME":"Agreement Supplier","IMG_FILE_ID":138},  
  {"DISPLAY_NAME":"Subrecipient","IMG_FILE_ID" :102},  
  {"DISPLAY_NAME":"California Supplier","IMG_FILE_ID":103},  
  {"DISPLAY_NAME":"Certified Small Business Concern","IMG_FILE_ID":162},  
  {"DISPLAY_NAME":"HUBZone Small Business","IMG_FILE_ID":163},  
  {"DISPLAY_NAME":"Minority-Owned Business","IMG_FILE_ID":164},  
  {"DISPLAY_NAME":"Service-Disabled Veteran-Owned","IMG_FILE_ID" :165},  
  {"DISPLAY_NAME":"Small Business","IMG_FILE_ID":166},  
  {"DISPLAY_NAME":"Small Disadvantaged Business","IMG_FILE_ID":167},  
  {"DISPLAY_NAME":"Veteran-Owned Small Business","IMG_FILE_ID":168},  
  {"DISPLAY_NAME":"Women-Owned Small Business","IMG_FILE_ID":169},  
  {"DISPLAY_NAME":"AbilityOne","IMG_FILE_ID":139},  
  {"DISPLAY_NAME":"8(a)","IMG_FILE_ID":170},  
  {"DISPLAY_NAME":"Catering Supplier","IMG_FILE_ID":171},  
  {"DISPLAY_NAME":"Individual","IMG_FILE_ID":116}]   

I used jQuery to read data from URL and generate the HTML code. The code is as following.

 $(document).ready(function() {  
 // top classes selection  
      $.getJSON("${pageContext.request.contextPath}/download/${classesfileId}",  
             function (json) {  
               console.log(json);  
               var columndiv;  
               var classes;  
               for (var i = 0; i < json.length; i++) {  
                    columndiv = $("<div class='col-sm-3'>");  
                    classes = $("<div class='checkbox'>");  
                    classes.append("<label> <input name='filter' value='"+json[i].IMG_FILE_ID+"' type='checkbox'/><img src='${pageContext.request.contextPath}/download/"+json[i].IMG_FILE_ID+"' alt='"+json[i].DISPLAY_NAME+"' title='"+json[i].DISPLAY_NAME+"'' /> "+json[i].DISPLAY_NAME);  
                    columndiv.append(classes);  
                $('#supplierFilter').append(columndiv);   
               }  
             });  
 });  

In the HTML, I have code as this:

 <form id="supplierFilter">  
 </form>  

When it display in browser, the HTML is generated as this:

 <form id="supplierFilter">  
      <div class="col-sm-3">  
           <div class="checkbox">  
           <label>  
                <input type="checkbox" value="138" name="filter">  
                <img title="Agreement Supplier" alt="Agreement Supplier" src="/supsearch/download/138">  
                Agreement Supplier  
           </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
           <label>  
                <input type="checkbox" value="102" name="filter">  
                <img title="Subrecipient" alt="Subrecipient" src="/supsearch/download/102">  
                Subrecipient  
           </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
                <label>  
                <input type="checkbox" value="103" name="filter">  
                <img title="California Supplier" alt="California Supplier" src="/supsearch/download/103">  
                California Supplier  
                </label>  
           </div>  
      </div>  
      <div class="col-sm-3">  
           <div class="checkbox">  
                <label>  
                <input type="checkbox" value="162" name="filter">  
                <img title="Certified Small Business Concern" alt="Certified Small Business Concern" src="/supsearch/download/162">  
                Certified Small Business Concern  
                </label>  
           </div>  
      </div>  
      ......  
 </form>