Why are my buttons full width after a Bootstrap 5 migration?

Question

I upgraded my dependencies and it caused me the following problem - These two buttons used to be placed next to each other but now they're stacked on top of each other and take the full width:

import { Button as BootstrapButton, Row, Container, Table } from 'react-bootstrap';

        <Container>
            <Row>
                <Button />
                <Button />
            </Row>
        <Container>

I guess there are a lot of changes in bootstrap 5 and react-bootstrap 2 so I might be missing something very simple, but I couldn't find anything on the docs of react-bootstrap about that

Answer 1

Bootstrap expects only columns to be inside row. Bootstrap 5 has CSS which forces all children in the row (expected to be columns) to grow to 100% width. So your buttons are growing to 100% width and wrapping because of flex-wrap on the .row.

Bootstrap 4 didn't have this...

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

So instead use Col inside the row and put the buttons in the Col. Set d-flex on the Col so the buttons will position horizontally since flex-direction: row is the flexbox default...

      <Container className="App">
          <Row>
            <Col className="d-flex">
              <Button
                    data-testid="brazejob-start-sync-btn"
                    variant="primary"
                    size="sm"
                >
                    Start New Sync
                </Button>
                <Button
                    data-testid="brazejob-cancel-sync-btn"
                    variant="warning"
                    size="sm"
                >
                    Cancel
                </Button>
            </Col>
          </Row>
      </Container>

https://codeply.com/p/19y5XOgGq1