Media Object Alignment Problem while using Reactstrap - reactjs

Question

This is how I want my page to look
But, my issue is this is how it ends up looking like
I tried changing around the column size and tried to put two column classes tags col-5 and col-7 to the 2 media objects that hold the image and the text respectively as I would do in Bootstrap, but it doesn't seem to work.
My React Component is rendered according to the following code
render(){
const menu = this.state.dishes.map((dish) => {
return (
<Media>
<Media left middle>
<Media object src={dish.image} alt={dish.name} />
</Media>
<Media body className="ml-5">
<Media heading>{dish.name}</Media>
<p>{dish.description}</p>
</Media>
</Media>
);
} );
return (
<div className="container">
<div className="row">
<Media list>
{menu}
</Media>
</div>
</div>
);
}
}
Can someone help me see where I am going wrong?

Answer 1

This sounds stupid, but made two small tweaks and it worked. The issue was that my division of the component into two columns was not happening in the single component.
Tweak 1:
Removed the "row" div from the return container
Tweak 2: Added row div to the rendered JSX instead and added classes col-3 and col 9 to the image and the body
return (
<div key={dish.id} className="row text-center mt-5">
// Add a col-3 class to the image
<Media className ="col-3">
<Media object src={dish.image} alt={dish.name} />
</Media>
// Add a col-9 class to the body
<Media body className="col-9 ml-5">
<Media heading>{dish.name}</Media>
<p>{dish.description}</p>
</Media>
</div>
);
It now works

Answer 2

Check your version of bootstrap, I've rolled back from 5.0.2 (which was the latest for me) to the 4.0.0 and it actually worked.
What I've done:
Set the version of bootstrap in "package.json" to "^4.0.0"
deleted the "node_modules" folder
ran "npm install"
Also if you check reactstrap homepage, it says that it uses "Bootstrap 4 components". Maybe it's incompatible with bootstrap 5.

Answer 3

You are probably using bootstrap 5.
If you want to continue using BS5 for the course (that's what I did), you have to define Media according to the new rules of bootstrap 5. Here is the official explanation:
https://getbootstrap.com/docs/5.1/utilities/flex/#media-object
Here is the final code:
const menu = dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 mt-5">
<div className='d-flex align-items-center'>
<div className="flex-shrink-0">
<img src={dish.image} alt={dish.name} />
</div>
<div className="flex-grow-1 ms-3">
<h3>{dish.name}</h3>
<p>{dish.description}</p>
</div>
</div>
</div>
);
});

Answer 4

You may have installed an incompatible bootstrap version. You can either change your code to work with your bootstrap version (following code is for version 5.2),
const menu = dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 mt-5">
<div className='d-flex align-items-center'>
<div className="flex-shrink-0">
<img src={dish.image} alt={dish.name} />
</div>
<div className="flex-grow-1 ms-3">
<h3>{dish.name}</h3>
<p>{dish.description}</p>
</div>
</div>
</div>
);
});
Or you can change the bootstrap version by,
If you're using npm
npm uninstall bootstrap
npm install bootstrap#4.0.0
If you're using Yarn
yarn remove bootstrap
yarn add bootstrap#4.0.0

Answer 5

The reason why Media Object doesn't work using reactstrap is:
Bootstrap media object has been discontinued from version 5. However, you can still create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. using the flex and spacing utility classes.

Answer 6

Add className='d-flex' in first media tag
then add className='ms-5' in media body tag
if u are working in bootstrap v5 and react v6, it will surely help you