Creating interactive HTML cards by dynamically generating them from a Javascript array and Bootstrap, organizing them into distinct rows and columns

Question

Creating interactive HTML cards by dynamically generating them from a Javascript array and Bootstrap, organizing them into distinct rows and columns

I need assistance in structuring my Team section with multiple rows, each containing 5 cards. I have a list of team members that I want to display in this format using a single array and loop. However, I am struggling to figure out how to automatically create new rows when one row is filled with 5 cards.

Currently, I manually created 3 different arrays for 3 rows, but the goal is to achieve this layout efficiently using a Single Array and Single Loop.

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13607c7e767c7d7653747e727a7f3d707c7e">[email protected]</a>"
  },
  // Additional team members...
];

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

teamDataOne.forEach(result => {
  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>
    `;

  container.innerHTML += content;
});

Below is a snippet of the HTML code:

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

The desired outcome is to have only five cards aligned in each row.

javascript html css arrays bootstrap-4

Answer 1

Answer №1

There are countless methods to achieve this task, but I will provide an example utilizing the modulo operator. You can accomplish it within a single loop like so:

// Stop using 'row' as a container and utilize the parent element instead
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    // Add the start of a row 
    content+= '<div class="row">'
  }
  // Add content
  content += '<div class="col....'

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

    // Close the current row and start a new one every 5 elements
    content += '</div><div class="row">'
  }

});
// Don't forget to close the last row after looping through all elements 
content += '</div>'
container.innerHTML += content;

(This is pseudo code that can be adjusted according to your requirements)

Answer 2

There are countless methods to achieve this task, but I will provide an example utilizing the modulo operator. You can accomplish it within a single loop like so:

// Stop using 'row' as a container and utilize the parent element instead
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    // Add the start of a row 
    content+= '<div class="row">'
  }
  // Add content
  content += '<div class="col....'

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

    // Close the current row and start a new one every 5 elements
    content += '</div><div class="row">'
  }

});
// Don't forget to close the last row after looping through all elements 
content += '</div>'
container.innerHTML += content;

(This is pseudo code that can be adjusted according to your requirements)

Answer 3

Answer №2

When using bootstrap grid classes row and col, a column created with col-md-2 will result in 6 partitions within a single row. This may cause 6 cards to be displayed in one row if more than 5 team members are added to the array.

While there is no specific class to divide the row into 5 partitions, you can add a small margin to achieve a layout of five cards per row. One solution is to use the m-2 class which adds a margin of 2px.

To implement this, simply add the class within the loop where you are creating the column:

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

Give it a try and see if it produces the desired outcome for your design.

Answer 4

When using bootstrap grid classes row and col, a column created with col-md-2 will result in 6 partitions within a single row. This may cause 6 cards to be displayed in one row if more than 5 team members are added to the array.

While there is no specific class to divide the row into 5 partitions, you can add a small margin to achieve a layout of five cards per row. One solution is to use the m-2 class which adds a margin of 2px.

To implement this, simply add the class within the loop where you are creating the column:

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

Give it a try and see if it produces the desired outcome for your design.

Creating interactive HTML cards by dynamically generating them from a Javascript array and Bootstrap, organizing them into distinct rows and columns

Answer №1

Answer №2

Similar questions

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

Fixing the issue of "additional space" in the Login Card with Bootstrap 5

Error message: `String not found in List.contains()`

How to access an HTML element in TypeScript similar to the use of the dollar sign ($) in JavaScript

Experiencing an excessive amount of re-renders in React due to useState

Creating new components within A-frame

The horizontal navigation bar will not extend the entire length of the page

Woops! Looks like there's an issue - the property 'url' is not defined and cannot be

Differences in Angular.js/jQuery html string parsing between versions 1.9.1 and 1.8.3

What steps should be taken to execute a function based on whether a user grants or denies access to their "Physical Location"?

Changing the depth buffer in a Three.js Shader Material

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

Sending a php DateTime object to javascript using Ajax

How to add dimensions to a background image using CSS3

In Python, make sure to reference each individual JSON element within an array

Verifying a user's initial visit status using COOKIES in a Servlet

text breaks free from the flex container when zooming in

PHP encounters difficulty in forming and allocating an array

Cookie Multitree: An Innovative JsTree Solution