Div card move side to side from left to right

Guest User

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


          
            
              
                
                  
                    📖
                    Health and Beauty
                  
                
              
            
          

          
          
            
              
                
                  
                    👕
                    Clothing & Accessories
                  
                
              
            
          
        
      



        
          
            
              
                
                  
                    🎮
                    Toys & Hobbies
                  
                
              
            
          
        


        
          
            
              
                
                  
                    💻
                    Home & Appliances
                  
                
              
            
          
        

        
          
            
              
                
                  
                    📢
                    TV & Audio
                  
                
              
            
          
        

          
          
            
              
                
                
                  🏃
                  Sport & Outdoor
                
              
              
            
          
        

        
          
            
              
                
                
                  💻
                  Computer & Tablets
              
            
          
        
      

          
          
            
              
                
                  
                  💻
                  Home Improvement
                
              
              
            
          
        

          
          
            
              
                
                  📷
                  Photography

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago
Accepted answer
I can see you have multiple cards-container classes, which might be causing some confusion. You only need one cards-container class to contain all the card elements. Additionally, you have different justify-content properties for each cards-container class, which is causing the cards to move around inconsistently. To move the cards side-to-side with equal spacing in between, you should remove the justify-content properties from the cards-container class and add justify-content-between to the card-container class instead.

Tuhin Paul3y ago

See below for the updated CSS code

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-container {
  margin: 10px;
  justify-content: space-between;
}

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

HTML:



  
    
      
        
          
            📖
            Health and Beauty
          
        
      
    
  
  
    
      
        
          
            👕
            Clothing & Accessories