using javascript array create bootstrap card
Sure! Here's an example of how you can use a JavaScript array to create Bootstrap cards:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Card Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="cardContainer"></div>
</div>
</div>
</div>
<script>
// Array of data for the cards
var cardData = [
{
title: "Card 1",
content: "This is the content of Card 1"
},
{
title: "Card 2",
content: "This is the content of Card 2"
},
{
title: "Card 3",
content: "This is the content of Card 3"
}
];
// Loop through the cardData array and create Bootstrap cards
for (var i = 0; i < cardData.length; i++) {
var card = document.createElement("div");
card.className = "card";
card.style.width = "18rem";
var cardBody = document.createElement("div");
cardBody.className = "card-body";
var cardTitle = document.createElement("h5");
cardTitle.className = "card-title";
cardTitle.textContent = cardData[i].title;
var cardContent = document.createElement("p");
cardContent.className = "card-text";
cardContent.textContent = cardData[i].content;
cardBody.appendChild(cardTitle);
cardBody.appendChild(cardContent);
card.appendChild(cardBody);
document.getElementById("cardContainer").appendChild(card);
}
</script>
</body>
</html>
This code creates a container with a row and column to hold the Bootstrap cards. It defines an array called cardData that contains the data for each card, including the title and content. Then, it loops through the cardData array and creates a Bootstrap card for each item, setting the title and content based on the data in the array.
Note that you'll need to include the Bootstrap CSS file in the <head> section of your HTML file for the styling to work properly.
I hope this helps! Let me know if you have any further questions.