Incorporating Bootstrap 4 on the front end and utilizing a straightforward template literal for string passing. My concern lies in the fact that the columns are being outputted into separate rows, a behavior I find perplexing.
const bodList = [
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
}
];
function bodTemplate(bod) {
return `
<div class="col-md-4 col-lg-3">
<div class="card border-0">
<img src="${bod.image}" class="card-img-top" alt="${bod.name}">
<div class="card-body pl-0">
<h5 class="card-title"><a href="${bod.profile}">${bod.name}</a> <span class="text-right">${bod.termExp}</span></h5>
<h6 class="card-title">${bod.title}</h6>
<h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
</div>
</div>
</div>
`;
}
document.getElementById("boardDirectors").innerHTML = `
${bodList.map(bodTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div id="boardDirectors"></div>
</div>
</div>