Bootstrap 4 row columns not breaking row

Question

I'm trying to create a bootstrap grid where every row has to columns, bootstrap has a class that does this, row-cols-*, but when I place the example on bootstrap website in a jsfiddle it doesn't break row like it is supposed to do. What am I doing wrong?

HTML:

<div class="container">
  <div class="row row-cols-2 text-white">
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
  </div>
</div>

score 4 · Accepted Answer · answered Dec 01 '19 at 09:31

4

The .row-cols-* class is new to Bootstrap 4.4: https://github.com/twbs/bootstrap/releases. Your problem might be due to the fact that you're referencing the prior version of Bootstrap. At least your jsfiddle was doing that.

Reference the correct Bootstrap 4.4 files fixes the issue:

demo: https://jsfiddle.net/davidliang2008/1Ltc9zos/1/

answered Dec 01 '19 at 09:31

David Liang

20,385
6
44
70

1

Thank you, really helped me, was using 4.3.1 – Hugo Persson Dec 01 '19 at 09:33

Antero Ukkonen · Answer 2 · 2019-12-01T09:36:35.097

0

External resources in JSFiddle (Adding Twitter Bootstrap CDN)

The logic is the same as when you set it up in an editor, like Brackets.

Try this:

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

edited Dec 01 '19 at 09:36

answered Dec 01 '19 at 09:06

Antero Ukkonen

81
1
6

The problem isn't that bootstrap isn't loading, other bootstrap classes like bg-primary is working – Hugo Persson Dec 01 '19 at 09:15

Bootstrap 4 row columns not breaking row

2 Answers2