0

So my understanding as per the documentation was

xs = small like phones

sm = ipads and other tablets

md = smaller laptops

lg = big laptops and big desktops

<div class="col-xs-12 col-md-4 col-lg-3">
      <div class="thumbnail"></div>
      ......
</div>

What I expect is that on my mobile phone the item will take the full width with "gutters" on either side.

On tablets(sm) I expect it to pick the previous declarion of xs so it should take the whole 12 cols. Since I didn't specify anything of "sm"

On laptops(md) I expect three items.

and on larger (lg) screens I four items per row.

The method I am using to test for responsiveness is simply adjusting my browser. What happens when I shrink the window is that my items do end up becoming one item per row when its at its smallest (xs and sm) but it overflows I can't see the entire item.

What am I doing wrong, did I misunderstand the theory behind the grid system?

Kara
  • 6,115
  • 16
  • 50
  • 57
sqwale
  • 554
  • 3
  • 24
  • Order of inheritance is LG > MD > SM > XS, You are expecting XS to go up to SM when it is the other way around. – Ramy Deeb May 30 '17 at 16:12
  • Read this http://getbootstrap.com/css/#grid – j08691 May 30 '17 at 16:14
  • Any picture to show up what you want and what you actually achieve? – The Little Cousin May 30 '17 at 16:16
  • I am not sure with what framework you are using bootstrap with. Have you used any other bootstrap code that works right now? What I mean is, for instance in django (python) you will have to import stuff before you can use bootstrap. – Ali Nouri May 30 '17 at 16:12

1 Answers1

0

I think there is been a slight mistake.

For full width for xs and sm ---->> col-xs-12 should be enough

Since you want 4 items per row for md you should write col-md-3 instead of col-md-4 (the number 3 shows how many columns it occupies out of 12 columns per row. So col-md-3 occupies 3 columns--->> 12/3 =4 items per row)

Similarly for 3 items per row on lg----> col-lg-4

I think that should solve on larger screens.

Also Im sorry that I didnot fully understand what you said about overflowing. If you could show me your code or a picture of what are you trying to implement, I could tell something.

Sidharth Anil
  • 768
  • 1
  • 6
  • 14