How to align the CardContent and MaterialUI CardAction button?

Question

I am writing a React application, in which I am using Cards of Material UI (and Bootstrap for the divs alignment and stuff). This is the code for my Card:

<Card elevation={10} className="mb-3">
  <div className="row">
    <div className="col-md-4">
      <CardMedia
        image={
          tourspot.images.length !== 0
            ? tourspot.images[0].url
            : "/src/assets/no-image.png"
        }
        title="Tourspot Image"
        component="img"
        className="img-fluid"
      />
    </div>
    <div className="col-md-8">
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {tourspot.title}
        </Typography>
        <Typography component="p" className="mb-3">
          {tourspot.description}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {tourspot.location}
        </Typography>
      </CardContent>
      <CardActions>
        <Button variant="text" size="small">
          View Tourist Spot
        </Button>
      </CardActions>
    </div>
  </div>
</Card>;

However, I cannot get the text and the button to align, it looks like this currently: Card Image

Any help on how to do this?

I have tried adding margins to the button and cardActions but they won't budge no matter how many margins I add.

Answer 1

The CardContent component has padding: 16px. The CardActions component has padding padding: 8px. The Button component has padding: 4px 5px.

Now that you want to align the padding for CardContent and CardActions. You will have to adjust considering the Button padding too. Assuming that you don't want left and right padding for Button. You can use the following:

<CardActions
  style={{
    padding: "16px",
  }}
>
  <Button
    variant="text"
    size="small"
    style={{
      padding: "4px 0",
    }}
  >
    View Tourist Spot
  </Button>
</CardActions>

I am setting the left and right padding of Button to 0px.

In case you want it then you can use the following:

<CardActions
  style={{
    padding: "16px 16px 16px 11px",
  }}
>
  <Button
    variant="text"
    size="small"
  >
    View Tourist Spot
  </Button>
</CardActions>

I subtracted 5px from the CardActions left padding.