Bootstrap 5 columns with equal-width only from breakpoint "md"

Question

I have used this code several times in Bootstrap 4 (on mobile columns have full width - from "md" the columns have equal-width):

<div class="container">
  <div class="row">
    <div class="col-12 col-md">
      1 of 2
    </div>
    <div class="col-12 col-md">
      2 of 2
    </div>
    <div class="col-12 col-md">
      3 of 3
    </div>
    <div class="col-12 col-md">
      4 of 4
    </div>
    <div class="col-12 col-md">
      5 of 5
    </div>
  </div>
</div>

If I use this code in Bootstrap 5 "col-12" overwrites "col-md".

How can I have on mobile the columns with full width and starting from "md" equal width, using Bootstrap 5?

score 1 · Accepted Answer · answered Jul 08 '21 at 11:44

As I recently answered here, this is a bug that was introduced in 5.0.2.

Until it's fixed, a workaround in your case would be to use row-cols-* instead...

<div class="container">
  <div class="row row-cols-1 row-cols-md-5">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
    <div class="col">
      3 of 3
    </div>
    <div class="col">
      4 of 4
    </div>
    <div class="col">
      5 of 5
    </div>
  </div>
</div>

https://codeply.com/p/BusA6Eyw8K

Bootstrap 5 columns with equal-width only from breakpoint "md"

1 Answers1