Reputation: 163
I am trying to understand how these classes are making four columns on larger screens and one column on mobile. And how can i make it two columns on mobile screens. I read the documentation but it still doesnt make sense to me
<ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
Upvotes: 1
Views: 56
Reputation: 15055
If the row contains only ProductWrapper
, it is one column because you have used `col-9.
col-*
classes apply to every device and viewport, from xs to xl. So if you want to have 2
columns on small size screen, just use col-6
.
Now since you are using col-6
, remove col-md-6
. As said, col-*
applies to all the screen size irrespective of their width.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-6 col-lg-3 mx-auto my-3 p-5 bg-primary">
</div>
<div class="col-6 col-lg-3 mx-auto my-3 p-5 bg-danger">
</div>
</div>
</div>
If the sum of columns are 12
, you do not need to use mx-auto
.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-6 col-lg-3 my-3 p-5 bg-primary">
</div>
<div class="col-6 col-lg-3 my-3 p-5 bg-danger">
</div>
<div class="col-6 col-lg-3 my-3 p-5 bg-primary">
</div>
<div class="col-6 col-lg-3 my-3 p-5 bg-danger">
</div>
</div>
</div>
FYI: Bootstrap 4 has removed col-xs-*
classes in favour of col-*
classes. So use col-*
instead of col-xs-*
Bootstrap grid is 12 columns based. That is to say a row contains exactly 12 columns.More than that, the columns will stack no matter the viewport.
If you want to have 12 columns in a row, you use 12 col-1
. If you want to have 4 same-size columns, you use 4 col-3
since 4*3 = 12
. Likewise if you want to have 2 same-size column, you use 2
col-6
For more info, visit Bootstrap grid examples
Upvotes: 1