Grid columns doesn't wrap as expected

Question

I have the following bootstrap-4 column structure:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">A</div>
    <div class="col-xs-6 col-sm-4">B</div>
    <div class="col-xs-6 col-sm-4">C</div>
  </div>
</div>

The expected column layout according to screen size is:

XS:

[  A ]
[B][C]

SM and up:

[A][B][C]

However, at XS each div takes the full width like this:

[A]
[B]
[C]

Check JSFiddle snippet here.

What could be wrong here?

score 3 · Accepted Answer · answered Jul 11 '20 at 22:42

col-xs-* simply does not exists on Bootstrap

The grid options are:

col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*

^{Soucre: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options}

So probably what you wanted to use is col-*

.row {
  background: #E2E2E2;
}

.card {
  border: solid 1px #6c757d;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          A
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          B
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          C
        </div>
      </div>
    </div>
  </div>
</div>

Yes! Basically the same answer ^^ – Tim Vermaelen Jul 11 '20 at 22:46 — Tim Vermaelen, Jul 11 '20 at 22:46

Tim Vermaelen · Answer 2 · 2020-07-11T22:49:40.003

You're using col-xs- but it doesn't exist in Bootstrap version 4.x. So the small breakpoint is actually the first one defined mobile and up.

If you intend to have B & C to be half the size on mobile, I suggest to program it like this:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    A
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    B
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

If not, move the breakpoint of sm up to md.

score 0 · Answer 3 · answered Jul 11 '20 at 22:37

0

Moving "div class row" one line below will solve your problem.

answered Jul 11 '20 at 22:37

Aung Clinic

1
1

score 0 · Answer 4 · edited Jul 12 '20 at 10:20

0

I've tested your code on "codepen.io", and works just fine. Maybe the "CDN" that "jsfiddle" uses is some version that does not render the classes in the appropriate manner. It is important whether you are using a "CDN" or you are downloading the files on you pc (.js, .css, etc.), that they support the Bootstap version you are using.

edited Jul 12 '20 at 10:20

β.εηοιτ.βε

33,893
13
69
83

answered Jul 11 '20 at 23:03

Gabriel

1
2

Grid columns doesn't wrap as expected

4 Answers4