After spending 3 hours trying to create a boostrap 'card' with 3 identical cards per row, I unfortunately failed. Here is the code I attempted:
$.getJSON("./listings.php", function(e) {
$.each(e, function(i, e){
if (e.id != "") {
//create table here
var html = '<div class="card-deck mb-3 text-center">'; // this opens the row
//here are the three columns
html += '<div class="card mb-4 box-shadow" style="background-image:url(./'+e.img+');background-size:330px; auto;background-repeat:no-repeat; background-position:center;">';
html += '<div class="card-header" style="background-color: #5bc0de;">';
html += '<h4 class="my-0 font-weight-normal">'+e.status+'</h4>';
html += '</div>';
html += '<div class="card-body">';
html += '<h1 class="card-title pricing-card-title"> </h1>';
html += '<ul class="list-unstyled mt-3 mb-4">';
for(var i=0; i<6; i++){
html += '<li> </li>';
}
html += '</ul>';
html += '<button type="button" id="'+e.id+'" class="community btn btn-block btn-outline-primary">Visit Platform</button>';
html += '</div>';
html += '</div>';
//end of 3rd column
html += '</div>'; //this closes the row
$('.community_listing').append(html); //this is just an empty div to host the rows
}
})
});
Sad face.