I'm having trouble aligning the cards next to each other. I've written the code below but for some reason, they're not displaying next to each other.
What I'm trying to do is call a REST API and get back a list of data. I want to loop through the results and display them in card format. Can someone help me with this? Thank you.
client.js
$(document).ready(function() {
$.ajax({
url: "REST API CALL",
success: function(data){
data.forEach(function(a) {
var html = `
<div class="row">
<div class="">
<div class="card" style="width: 20rem; text-align: center; display: inline-block;">
<img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius: .60rem;">
<div class="card-body">
${a[0]}|${a[4]}<br>
${a[7]}<br>
<i class="fa fa-car"></i>${a[9]}
<p class="card-text"></p>
</div>
</div>
</div>
</div>`
$('#msgs').append(`<div>${html}</div>`);
});
}
}).then(function(data) {
});
});