How to assign col only on desktop in Bootstrap 5?

Question

Bootstrap 5 allow to use .col class display equal-width columns but I can't find a way to use it only on desktop and assign a 6 column on mobile

I try with this but it doesn't work

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg">
      Column
    </div>
  </div>
</div>

Which version (specifically) are you using? Also note there is no col-xs-* in Bootstrap 5 — Carol Skelly, Dec 20 '21 at 14:01
That's not a specific version... Which specific version? 5.0.1, 5.0.2, 5.1.0, etc? — Carol Skelly, Dec 20 '21 at 14:41

score 0 · Answer 1 · answered Dec 20 '21 at 12:17

0

You can try this

<div class="col-6 col-sm">

answered Dec 20 '21 at 12:17

Soner Evran

49
6

no, it doesn't work it always display 2 elements per row – al404IT Dec 20 '21 at 13:32
if you want 6 elements per row, you need to use col-2 instead of col-6 – Soner Evran Dec 21 '21 at 05:25
It is a BUG in 5.0.2, they marked as already answered "Bootstrap v5 Grid is not working in "col-lg" case" – al404IT Dec 21 '21 at 09:36

How to assign col only on desktop in Bootstrap 5?

1 Answers1