Bootstrap theme not working through script - html

Question

I'm trying to retrieve the country code from our API.
$(document).ready(function() {
$.ajax({
url: "http://api.ourapi",
dataType: "json",
success: function( countries ) {
var selectHTML = "";
selectHTML="<select>";
for(i = 0; i < countries.length; i = i + 1) {
country = countries[i];
selectHTML += "<option value=" + country.countryCode + ">" + country.countryName + "(" + country.countryPrefix +")</option>";
}
selectHTML += "</select>";
document.getElementById("countrycode").innerHTML = selectHTML;
}
});
});
<td>
<div class="form-group">
<label class="control-label" for="countrycode"></label>
<div id="countrycode" class="col-sm-6 col-md-12"></div>
</div>
</td>
I'm getting the results. but the problem is that the Bootstrap is not not working on the select element as it's it displaying in old html form.
How could I make it to display in bootstrap manner and also how to decrease the width of select element?

Answer 1

Try adding the form-control class.
You can do this by changing your selectHTML line to the one below.
selectHTML="<select class='form-control'>";
and to align it properly make the following changes to div#countrycode
<div id="countrycode" class="pull-left" style="width:100%;" ></div>

Answer 2

Add the form-control class to the countrycode div. That should format it correctly. You can checkout the bootstrap form docs here: http://getbootstrap.com/css/#forms
To change the width, you can change the number of columns allocated to it in the class, such as changing col-sm-6 to col-sm-4.
Every time you add a nested col, it should be within a new row. Try adding the row class to your outer div
<div class="form-group row">
<label for="countrycode"></label>
<div id="countrycode" class="form-control col-sm-4"></div>
</div>