How to align elements in bootstrap cards to bottom of card?

Question

In the CodeSandbox example below, I have two Bootstrap (reactstrap) Card elements side-by-side. Is there any way to get the Button in each card to align to the bottom of the card, plus some margin, so they look aligned to each other? I tried various Flexbox classes from the Bootstrap docs: https://getbootstrap.com/docs/4.0/utilities/flex/ but nothing has worked.

Note, the CodeSandbox output window has to be wide enough for the cards to stack side-by-side as in the image below.

CodeSandbox

below code content:

import React from "react";
import ReactDOM from "react-dom";
import {
  Card,
  CardText,
  CardBody,
  CardTitle,
  CardSubtitle,
  CardDeck,
  Button
} from "reactstrap";

function App() {
  return (
    <div className="App">
      <CardDeck>
        <Card>
          <CardBody>
            <CardTitle tag="h5">Card title</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Card subtitle
            </CardSubtitle>
            <CardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
        <Card>
          <CardBody>
            <CardTitle tag="h5">Card title</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Card subtitle
            </CardSubtitle>
            <CardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content. Some quick example text to build on
              the card title and make up the bulk of the card's content.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </CardDeck>
    </div>
  );
}

Answer 1

you can use display flex. but you need to break your CardBody into two divs, one with the content, and another with the button. use then justifyContent: 'space-between'. Add also some margin-top to wrapping button div to ensure some space for safety.

below the approach I described:

<Card>
  <CardBody style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
    <div>
      <CardTitle tag="h5">Card title</CardTitle>
      <CardSubtitle tag="h6" className="mb-2 text-muted">
        Card subtitle
      </CardSubtitle>
      <CardText>
        Some quick example text to build on the card title and make up the
        bulk of the card's content.
      </CardText>
    </div>

    <div style={{marginTop: '12px'}}>
      <Button >Button</Button>
    </div>
  </CardBody>
</Card>