Why my Reactstrap's Media object is not aligned properly?

Question

I have recently started learning to react and reactstrap and I wanted to use Reactstrap's Media Object but my results are not what I want. As shown in documentation, the image heading and description should come right next to the image, but after applying the same, the image heading and description are aligned below the image. Screenshot of my code's outcome.

Code:-

import React, {Component} from "react";
import {Media} from "reactstrap";

class Menu extends Component {
constructor(props) {
super(props);
this.state = {
  dishes: [
    {
      id: 0,
      name: "Uthappizza",
      image: "assets/images/uthappizza.png",
      category: "mains",
      label: "Hot",
      price: "4.99",
      description:
        "A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer."
    },
    {
      id: 1,
      name: "Zucchipakoda",
      image: "assets/images/zucchipakoda.png",
      category: "appetizer",
      label: "",
      price: "1.99",
      description:
        "Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce"
    },
    {
      id: 2,
      name: "Vadonut",
      image: "assets/images/vadonut.png",
      category: "appetizer",
      label: "New",
      price: "1.99",
      description:
        "A quintessential ConFusion experience, is it a vada or is it a donut?"
    },
    {
      id: 3,
      name: "ElaiCheese Cake",
      image: "assets/images/elaicheesecake.png",
      category: "dessert",
      label: "",
      price: "2.99",
      description:
        "A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms"
    }
  ],
};
}

render() {
const menu = this.state.dishes.map((dish) => {
  return (
    <div key={dish.id} className="col-12 mt-5">
      <Media>
        <Media left middle>
          <Media object src={dish.image} alt={dish.name} />
        </Media>
        <Media body className="ml-5">
          <Media heading>
          {dish.name}
          </Media>
          {dish.description}
        </Media>
      </Media>
    </div>
  );
});

return (
  <div className="container">
    <div className="row">
      <Media list>{menu}</Media>
    </div>
  </div>
);
}
}

export default Menu;

Why my image heading and description are not aligned right to the image? Where I'm doing wrong?

Answer 1

I got the same problem and couldn't find any error in the code. I modified the code as follows:

return (
  <div key={dish.id} className="col-12 mt-5">
    <Media tag="ul" className="row">
      <Media left middle className="col-3">
        <Media object src={dish.image} alt={dish.name} />
      </Media>
      <Media body className="ml-5 col-9">
        <Media heading>{dish.name}</Media>
        <p>{dish.description}</p>
      </Media>
    </Media>
  </div>
);

This worked for me.

Answer 2

Thanks for the answer, I solved the problem.

We have to use "row" and "col-9" to let the descriptions and the images in one row.

Nevertheless, I am still a little confused: if the class="media-left" lets the image float to the left, why it doesn't work in this situation?

Acknowledgements @rmlockerd and Chaminie

return (
  <div key={dish.id} className="col-12 mt-5">
    <Media tag="ul" className="row">
      <Media left middle className="col-3">
        <Media object src={dish.image} alt={dish.name} />
      </Media>
      <Media body className="ml-5 col-9">
        <Media heading>{dish.name}</Media>
        <p>{dish.description}</p>
      </Media>
    </Media>
  </div>
);

Answer 3

You probably are using bootstrap 5, which does not include the object Media anymore. See the bootstrap 5 documentation. I had the same problem. Try install the bootstrap 4 instead.

Anyway, I just did the downgrade of the bootstrap package to version 4.6.0 and everything is working properly here.

Answer 4

Clear out the App.css. It worked for me.