Search code examples
reactjsnext.jsreact-bootstrapreactstrap

Reactstrap's col-0 doesn't work as expected in NextJS 12

Just installed NextJS 12 and I'm working on a small app but when I want to use a Col with a 0 size it doesn't work as expected, here is my JSX code :

<Container>
  <Row>
      <Col xs="0">hello</Col>
    <Col>world</Col>
  </Row>
</Container>

here is the result I get :

enter image description here

here is my dependencies :

enter image description here

here is my imports :

enter image description here

here is the CSS generated for the inspected element :

enter image description here

I cant figure out if it's a bug in some library or a mistake by me

Solution

  • It seems to be a bug in the bootstrap 5 package, For now I have found a solution by downgrading the bootstrap version from 5 to 4.1

    For yarn :

    yarn add bootstrap@4.1

    For NPM :

    npm i bootstrap@4.1