CODEWITHSUNDEEP
bootstrap-4
TheGreen Lightbulb
TheGreen Lightbulb

Reputation: 163

Can Someone Explain how these bootstrap classes work

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

Answers (1)

mahan
mahan

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-*

Update

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

Related Questions