Hi Team
I need some help with my div card, i want to move them side to side using d-flex adjust-content between, but they appear to move side to side.
// css file
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-container {
margin: 10px;
}
.cards-container_0 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-container_0 {
margin: 10px;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
}
.icon {
font-size: 24px;
margin-right: 5px;
}
h3 {
margin: 0;
font-size: 14px;
}
// Bootstrap div cards
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">📖</span>
<h3>Health and Beauty</h3>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-lg-center">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">👕</span>
<h3>Clothing & Accessories</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-lg-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">🎮</span>
<h3>Toys & Hobbies</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-lg-center">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">💻</span>
<h3>Home & Appliances</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">📢</span>
<h3>TV & Audio</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-center">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">🏃</span>
<h3>Sport & Outdoor</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">💻</span>
<h3 class="card-title">Computer & Tablets</h3>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="row flex-wrap">
<div class="col-12">
<span class="icon">💻</span>
<h3>Home Improvement</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-container d-flex justify-content-between">
<div class="card-container">
<div class="card" style="width: 120px; height: 120px;">
<div class="card-body">
<div class="col-12">
<span class="icon">📷</span>
<h3>Photography</h3>
</div>
</div>
</div>
</div>
</div>