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

Questions

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

February 14, 2022

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-2">
        <div class="row text-center">
          <div class="col-md-4 col-sm-2">A</div>
          <div class="col-md-4 col-sm-2">B</div>
          <div class="col-md-4 col-sm-2">C</div>
          <div class="col-md-4 col-sm-2">D</div>
          <div class="col-md-4 col-sm-2">E</div>
          <div class="col-md-4 col-sm-2">F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

>Solution :

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-2">
        <div class="row text-center">
          <div class="col-md-4 col-2">A</div>
          <div class="col-md-4 col-2">B</div>
          <div class="col-md-4 col-2">C</div>
          <div class="col-md-4 col-2">D</div>
          <div class="col-md-4 col-2">E</div>
          <div class="col-md-4 col-2">F</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>