Gcobani Mkontwana

Gcobani Mkontwana

  • 565
  • 1.9k
  • 407.9k

Div card move side to side from left to right

Mar 30 2023 11:23 PM

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">&#x1F4D6;</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">&#x1F455;</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">&#x1F3AE;</span>
                    <h3>Toys &amp; 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">&#x1F4BB;</span>
                    <h3>Home &amp; 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">&#x1F4E2;</span>
                    <h3>TV &amp; 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">&#x1F3C3;</span>
                  <h3>Sport &amp; 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">&#x1F4BB;</span>
                  <h3 class="card-title">Computer &amp; 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">&#x1F4BB;</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">&#x1F4F7;</span>
                  <h3>Photography</h3>
            </div>
          </div>
        </div>
    </div>
</div>

 


Answers (2)