Click here to Skip to main content
15,940,550 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Team

I have div cards and i am using d-flex adjustment..... But they do not appear to be moving from left to right,that is side by side with spaces in between. Their position is all over the place with no good ui. Need some help with this thanks.

What I have tried:

HTML
// Bootstrap

<pre><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">
                              📖
                              <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">
                              👕
                              <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">
                              🎮
                              <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">
                              💻
                              <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">
                              📢
                              <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">
                            🏃
                            <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">
                            💻
                            <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">
                            💻
                            <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">
                            📷
                            <h3>Photography</h3>
                      </div>
                    </div>
                      </div>
                      </div>
                      </div>


// css
.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;
  }
  
  






.icon-health-beauty {
    color: #1dcaff;
  }
  
  .icon-clothing-accessories {
    color: #f44336;
  }
  
  .icon-toys-hobbies {
    color: #9c27b0;
  }
  
  .icon-home-appliances {
    color: #ff9800;
  }
  
  .icon-tv-audio {
    color: #795548;
  }
  
  .icon-sports-outdoor {
    color: #4caf50;
  }
  
  .icon-computer-tablets {
    color: #8bc34a;
  }
  
  .icon-home-improvement {
    color: #ffeb3b;
  }
  
  .icon-photography {
    color: #03a9f4;
  }
  
  .icon-video-games {
    color: #e91e63;
  }
  
  .icon-phone-smartwatches {
    color: #673ab7;
  }
  
  .icon-kids-family {
    color: #009688;
  }
  
  
  .icon-automotive {
      color:#673ab7;
  }
  
  .icon-garden-patio {
      color:#ff9800;
  }
Posted
Updated 30-Mar-23 21:32pm

1 solution

Your HTML is an absolute mess:
Edit fiddle - JSFiddle - Code Playground[^]

You have cards-container elements within other cards-container elements; and you have cards-container elements containing single card-container elements.

You haven't explained what layout you want. But you can start by tidying up your HTML to have a single cards-container containing all of your card-container elements:
HTML
<div class="cards-container d-flex justify-content-between">
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
    <div class="card-container">
        <div class="card" style="width: 120px; height: 120px;">
            ...
        </div>
    </div>
</div>
Edit fiddle - JSFiddle - Code Playground[^]

Then look to move the inline styles (width:120px;height:120px;) to your stylesheet:
CSS
.card-container > .card {
    width: 120px;
    height: 120px;
}
Edit fiddle - JSFiddle - Code Playground[^]

Once you've done that, you can start trying to make it look like what you want. If you're still struggling, you'll need to explain precisely what you want it to look like.
 
Share this answer
 
Comments
Gcobani Mkontwana 31-Mar-23 4:45am    
@Richard Deeming thanks so much now i know where my issue was, d-flex adjustment for using it to all div cards. Your current solution works, just will amend aligning of others but logic prety straight foward especially on css and div side.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900