Search code examples
cssreactjsreact-bootstrap

Align button in a Card Footer to the right in React Bootstrap


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>

Solution

  • 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>