I've been diving into Django and although I'm fairly new to CSS, I managed to put together a page displaying various products using Bootstrap cards.
https://i.sstatic.net/xme5m.png
It appears that my code should have wrapped these cards properly, but unfortunately, it isn't doing so as expected.
function createProductCards(products) {
const container = document.querySelector('.card-deck');
products.forEach(product => {
const cardDiv = document.createElement('div');
cardDiv.classList.add('card');
const imageTag = document.createElement('img');
imageTag.setAttribute('src', product.image);
imageTag.setAttribute('alt', product.name);
imageTag.classList.add('card-img-top');
cardDiv.appendChild(imageTag);
const bodyTag = document.createElement('div');
bodyTag.classList.add('card-body');
cardDiv.appendChild(bodyTag);
const nameTag = document.createElement('h3');
nameTag.textContent = product.name;
nameTag.classList.add('card-title');
bodyTag.appendChild(nameTag);
const descriptionTag = document.createElement('p');
descriptionTag.textContent = product.description;
descriptionTag.classList.add('card-text');
bodyTag.appendChild(descriptionTag);
const genderTag = document.createElement('h6');
genderTag.textContent = product.gender;
genderTag.classList.add('card-text');
bodyTag.appendChild(genderTag);
container.appendChild(cardDiv);
});
}/* Your CSS code for styling */
body {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
main {
flex: 1;
display: flex;
flex-wrap: wrap;
width: 100%;
}
footer {
background-color: #f8f9fa;
padding: 20px 0;
text-align: center;
}
.card-container {
justify-content: space-between;
gap: 20px;
width: 100%;
}
.card-deck {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
text-align: center;
}
.card {
flex: 1 0 auto;
width: 25%;
}
@media screen and (max-width: 768px) {
.card-deck {
flex: 1 0 100%;
max-width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Header -->
<main>
<div class="card-container">
<div class="card-deck">
<!-- Product cards will be inserted here dynamically -->
</div>
</div>
</main>
<!-- Footer -->
<script>
// Javascript logic goes here
</script>
<script src="home.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2d213c2b0e7c6077607f">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
I've also included JavaScript fetching products from the backend and creating the cards on the webpage.
If you have any insights on why the cards aren't wrapping correctly or suggestions on achieving multiple lines with 4 or 5 cards each, please share your thoughts. Thank you in advance...