Grid columns doesn't wrap as expected - css

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?

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

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.