Align Card Buttons on bottom Material UI

Question

I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox.

The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/

I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with Bootstrap so i hope a CSS Master can help me out. I'll attach the pic below for ref.

Also for ref here's how my code looks in react( ApiPosts is my cards component) ->

                    <Grid container>
                        <Grid item xs={12}>
                            <Paper className={classes.paper}>
                                <Row className="rowSpacer">
                                    <Col xs>
                                        <Typography variant="title" align="center" color="textPrimary" gutterBottom>
                                            Posts are below
                            </Typography>
                                    </Col>
                                </Row>
                                <Divider />
                                <ApiPosts />
                            </Paper>


                        </Grid>
                    </Grid>

And finally my cards are wrapped in <Row around="xs"> (4 posts in a row) and each card in a col <Col xs >

Thanks in advance!

Edit: Solved thanks to Ivan's answer.Here's the code in case anyway needs it (working on Material-UI Cards).

.portCardCl {
    display: flex;
    flex-direction: column;
    height:100%;
}

.portBodyCl {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
}

.portButCl{
    display: flex;
    justify-content: flex-start;
}

portCardCl goes on the first <Card>, portBodyCl goes on <CardActionArea> and finally portButCl goes on <CardActions>

Have you heard about `css-grid`? I think it is an easier way to make a grid of cards. If you want I can make a snippet for you. — Ivan Burnaev, Oct 05 '18 at 16:50
I've heard of it, but i've never seen it work/tried it. A snippet would be helpfull IF it is compatible with React Flexbox grid (Its already integrated in 80% of the project and replacing it would take some work). I'll look into `css-grid`, thanks. — Dante R., Oct 05 '18 at 16:54

Ivan Burnaev · Accepted Answer · 2018-10-05T17:21:50.053

Here is example with css-grid.

const {
  Button,
  createMuiTheme,
  CssBaseline,
  MuiThemeProvider,
  Typography,
  Paper,
  withStyles,
} = window['material-ui'];

const styles = theme => ({
  root: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gridGap: "24px",
  },
  
  card: {
    display: "grid",
    gridTemplateRows: "1fr auto",
    gridGap: "8px",
    minHeight: 280,
    backgroundImage: `url(https://via.placeholder.com/100x200)`,
    backgroundSize: "cover"
  },
  
  body: {
    alignSelf: "end",
    textAlign: "center"
  },
  
  actions: {
    display: "flex",
    justifyContent: "space-between"
  }
});

const Grid = withStyles(styles)(
  class Grid extends React.Component {
    render () {
      const { classes } = this.props;
      const cards = [1, 2, 3, 4];
      
      return (
        <div className={classes.root}>
          {cards.map(c => (
            <Paper key={c} className={classes.card}>
              <div className={classes.body}>
                <Typography variant="subheading">
                  Test Image
                </Typography>
                
                <Typography variant="caption">
                  Small help text
                </Typography>
              </div>
              <div className={classes.actions}>
                <Button>Left</Button>
                <Button color="primary">Right</Button>
              </div>
            </Paper>
          ))}
        </div>
      )
    }
  }
)

const theme = createMuiTheme();

ReactDOM.render((
  <MuiThemeProvider theme={theme}>
    <Grid />
  </MuiThemeProvider>
), document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    
    <div id="root"></div>

Here is example of card with flex using only

.card {
  padding: 24px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13);
  background: skyblue;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 160px;
}

.card__body {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  justify-content: center;
}

.card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

<div class="card">
  <div class="card__body">
    Test Text
  </div>
  <div class="card__actions">
    <button>Left</button>
    <button>Right</button>
  </div>
</div>

Had to make a few changes to suit my needs, but it works perfectly (used the flex solution). Many thanks! I'll update my question with the solution for other people. — Dante R., Oct 06 '18 at 16:50

Align Card Buttons on bottom Material UI

1 Answers1

Linked