CODEWITHSUNDEEP
twitter-bootstrapcss
SharpCoder
SharpCoder

Reputation: 19189

Bootstrap layout - Should we always use XS col class

I was reading about bootstrap 12 grid column layout.

The author used .col-sm-8 class & said on small, medium & large devices the DOM element will take 8 column space but on XS device the DOM element will take whole width See the below image

In another example he used .col-xs-4 class and said this will take width of 4 columns on XS, SM, M & LG devices.

Does this means we should always use xs* classes irrespective of the device as it will automatically adjust on bigger devices ?

What are the pros/cons of always using xs class?

enter image description here

Upvotes: 3

Views: 3583

Answers (2)

EVrpg
EVrpg

Reputation: 27

You should not use only one class if your are try to target different devices, for example let's say that you have a galley and you want to show 4 pics on desktop devices 2 on table and only one on phone devices.

Below a example to give you an idea.

<div class="container">
  <div class="row">
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
  </div>
</div>

Upvotes: 3

Christine Cha
Christine Cha

Reputation: 525

Bootstrap is built with mobile-first designs in mind, which is why XS columns would be the default choice. In this row:

<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>

We'll have 3 equal-width columns on any screen size. Larger breakpoints are irrelevant, because we're already at the default layout.

However, in this row:

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

You'll see that there are 3 columns on medium/large screens and 1 column (stacked) in small and xsmall screens.

If you want it to "break" at different screen sizes, you use sm, m, and l columns. If you never need it to "break," using xs all the time is fine.

Upvotes: 5

Related Questions