Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns

Question

I want to create my Team section with more than one rows and 5 cards in one rows. I want to create the array of all team members and align it in the above-mentioned format. But my problem is I couldn't make card align in a different row when one row is filled by 5 cards.

I did it with manually creating 3 different arrays for 3 rows. But I want to do it using Single Array and Single Loop.

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  }
];

const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
    <div class="col-md-2 shadow p-3 mb-5 bg-white rounded ">
        <img src="${result.img}" height="150" width="150" alt="name">
        <h4>${result.name}</h4>
        <h6>${result.position}</h6>
        <div class="border-bottom"></div>
        <a href="${
          result.facebook
        }" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="${
          result.email
        }" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a>
        </div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

Here is my HTML Code:

<div class="row justify-content-around wow zoomIn" id="teamRowOne">
      </div>

I expect to align only five cards in each row.

Answer 1

As you are using bootstrap grid classes row and col , When you are creating the column using col-md-2 , the single row will get 6 partitions, so you might be getting 6 cards in one row after adding more than 5 team members in the array.

As there is no class to divide the row in 5 partitions, but in your case you can add a little margin to make it five cards per row. I tried it with m-2 which is margin of 2px.

Add it where you are creating the column inside the loop

<div class="col-md-2 m-2 shadow p-3 mb-5 bg-white rounded ">

Hope it works for you.

Answer 2

There are thousand ways to do it, i just want to example one using the modulo operator. You could do it in one loop like this:

// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;

(it´s tweakable pseudocode to let you get an idea)