How to put card in row using react bootstrap, mapping and props?

Question

Hello everyone..

I am new in reactjs.

I tried to make card in row using bootstrap in but it results only in vertical line.

I tried using row in div but because of mapping it display in vertical line rather than horizontal Hello everyone..

I am new in reactjs.

I tried to make card in row using bootstrap in but it results only in vertical line.

I tried using row in div but because of mapping it display in vertical line rather than horizontal

Here is my code in card.jsx

import "./Card.scss"

function Card(props) 
{
 return (
     <div>
         
  <div class="d-flex justify-content-center">
<div class=" flip-card text-center" >
   <div class="flip-card-inner">
   <div class="flip-card-front">
   <div class="card-body text-center">
   <img src={props.img} alt="image" style={{width:"30%",paddingTop: "15px"}}/>
   <p class="card-title">{props.title}</p>
   </div>
   </div>
   <div class="flip-card-back text-center">
   <p>{props.backside}</p>
   </div>
 </div>
 </div>
</div>
</div>

 )
}


This is card detail

export default Card

 const CardData=[
 {
 img:"./assets/img/web.png",
 title:"Web Development",
 backside:"Build a website using HTML, CSS and Bootstrap"
},
{
 img:"./assets/img/web.png",
 title:"React JS",
 backside:"Used reactJs to build user-friendly interfaces applications"
},
{
 img:"./assets/img/web.png",
 title:"Java",
 backside:"Done small project using java"
},
];
export default CardData




This is mapping
{CardData.map((props)=>{
                            return(
                                <Card
                                img={props.img}
                                title={props.title}
                                backside={props.backside}/>
                                
                            );
                        })}````

Answer 1

Wrap your map code with a div and add display: 'flex' , flexDirection: 'row' styles to make the child to render horizontal instead of vertical.

<div style={{display: 'flex', flexDirection: 'row'}}> 
    {CardData.map((props)=>{
              return(
                    <Card
                         img={props.img}
                         title={props.title}
                         backside={props.backside}/>
                    );
                  }
               )
   }
</div>

Answer 2

Yes, you can do it. One of the solutions is to use flexBox And using the flex-direction: row. Example:

.flex-container {
  flex-direction: row;
}