Strange behavior of Bootsrap cols on nested rows, between sm and xs breakpoints-CodePudding

I'm coding a little website using Bootstrap 5. I'm trying to make 6 elements show on two lines for breakpoints >= md , and on a single line for smaller breakpoints. It works for the sm breakpoint, but when I reduce to xs breakpoint, the 6 elements show on a vertical line o_O And I don't understand why...

The code above is simplified to contain only what it's needed to reproduce the problem, other elements (other rows...) of my code seems to be not responsible for my problem.

Thanks !

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <div >A</div>
          <div >B</div>
          <div >C</div>
          <div >D</div>
          <div >E</div>
          <div >F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

You just have to change col-sm-2 to col-2 it will work for you example below:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  
  <body>
    <div >
        <div >
            <div >A</div>
            <div >B</div>
            <div >C</div>
            <div >D</div>
            <div >E</div>
            <div >F</div>
        </div>
    </div>
  </body>
</html>

CodePudding user response：

No breakpoint identifier is necessary. col-2 will work.

<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <div >A</div>
          <div >B</div>
          <div >C</div>
          <div >D</div>
          <div >E</div>
          <div >F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

remember that Bootstrap starts breakpoints from small screens to larger screens, In this link, they talk about the behavior of the grid Regards