Question 72788 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Facing Issue on doing div component side by side in React – Reactjs

`The problem is , i want to do two components side by side .
i’m using bootstrap not react bootstrap, i’m trying to do side by side as shown in image, but listgroup is coming sown of address formenter image description here

I tried it by css but it could not work for me , so i’m expecting listgroup to right of my address form.

Here is my code images.
enter image description here
enter image description here
enter image description here
enter image description here
enter image description here
`

Tags:

3

Answers


  1. 0

    Enclose them in one div and use flex for that

    Login or Signup to reply.
  2. 0

    I think this is happening because of using multiple div, using one div, and using the flex command or checking if this happening for import error.

    Login or Signup to reply.
  3. 0

    Here’s what you can do to place components side by side in a page.

    Suppose you have two components <Form/> and <ListGroup/>. You should create a parent container and make it a flex container. Then wrap the components inside a <div/>. Code below:

    <div style={{display: "flex", justifyContent: "space-between"}}>
   <div> 
      <Form /> 
   </div> 
   <div> 
      <ListGroup/> 
   </div> 
</div>

    You can also give flexBasis: some value in percentage to the children <div> above to say how much screen width each component should occupy.

    Update: (using flexBasis)

    <div style={{display: "flex", flexDirection: "row"}}>
   <div style={{flexBasis: "50%"}}> 
      <Form /> 
   </div> 
   <div style={{flexBasis: "50%"}}> 
      <ListGroup/> 
   </div> 
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search