I am trying to align a button (And eventually 2 buttons) to the right in a Card.footer
in React Bootstrap. i have tried style=={{display: 'flex', display: 'flex', alignItems: 'flex-end', float: 'right'}}
and className='btn btn-success btn-lg float-right'
and many combinations of these without anything changing.
my card is as follows:
<Card style={{ marginBottom: "15px", marginTop: "15px", cursor: 'pointer' }}>
<ListGroup>
<ListGroup.Item>
<Container>
Card Content
</Container>
</ListGroup.Item>
</ListGroup>
<Card.Footer>
<Row>
<Button className='btn btn-success btn-lg float-right' style={{ display: 'flex', alignItems: 'flex-end', float: 'right' }}>Like</Button>
</Row>
</Card.Footer>
</Card>
Use ml-auto
class (margin-left: auto)
<Button className="btn btn-success btn-lg ml-auto">
https://getbootstrap.com/docs/4.5/utilities/spacing/#notation
For subsequent buttons to the right, apply ml-x
e.g., ml-2
<Row>
<Button className="btn btn-success btn-lg ml-auto">Like</Button>
<Button className="btn btn-success btn-lg ml-2">Another Btn</Button>
</Row>