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

user_8618818 0
Viewed 377

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
                    data-testid="brazejob-start-sync-btn"
                    variant="primary"
                    size="sm"
                    disabled={isJobRunning()}
                    onClick={startSync}
                >
                    <PlayFill />
                    Start New Sync
                </Button>
                <Button
                    data-testid="brazejob-cancel-sync-btn"
                    variant="warning"
                    size="sm"
                    disabled={!isJobRunning()}
                    onClick={cancelSync}
                >
                    <StopFill />
                    Cancel
                </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

bootstrap-5 react-bootstrap bootstrap-4
2 Answers

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

user_1714560

To elaborate on Zim's answer, either add a Col component around each button or remove the Row component and use flex classes. I wouldn't do both as it's somewhat redundant.

Have a look at the grid and flex docs as a refresher.

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

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

<Container>
   <div className="d-flex">
      <Button />
      <Button />
   </div>
<Container>
user_12648040
Related