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>