CODEWITHSUNDEEP
cssreactjs
Abinash Biswal
Abinash Biswal

Reputation: 17

How to bring the image to the right of react Card

I have a react Card.

I want to bring the image on the card to the right-side of card and it should also be parellel to the Name Pankaj Rout, and should be responsive.

This is what I have tried so far,

var userMap = [
  {name: "Pankaj Rout", email: "[email protected]"}
]

userData.map((data) => {
      return (
        <div key={data.email}>
          <Card style={cardStyle}>
            <Card.Body>
              <div class="col-sm-6 text-right">
                <img
                  className={classes.img}
                  style={cardImgStyle}
                  src="https://www.w3schools.com/howto/img_avatar.png"
                  alt="sans"
                />
              </div>
              <Card.Title> {data.name} </Card.Title>
              <Card.Subtitle className="mb-2 text-muted">
                General Manager
              </Card.Subtitle>
              <Card.Text> {data.email} </Card.Text>
                <Button> Delete </Button>
                <Button> Email </Button>
                <Button> Chat </Button>
            </Card.Body>
          </Card>
        </div>
      );

classes is used from withStyles hook

const useStyles = (theme) => ({
  img: {
    justifyContent: 'right',
  }
});

following style is referring to cardImgStyle

const cardImgStyle = {
  width: "30%",
  height: "30%",
  borderRadius: "50%",
  display: "flex",
  flexWrap: "wrap",
};

Could anyone please point out what is wrong here?

Thanks!!

Upvotes: 1

Views: 816

Answers (1)

Ali Mohamadi
Ali Mohamadi

Reputation: 219

justifyContent : 'space-beetwin' ;

or

for img : float :' right';

Upvotes: 2

Related Questions