Bootstrap and Smartphones

Question

Where can I find information about the difference in behaviour of Bootstrap on a PC or Tablet and the behaviour on a smartphone? I've searched for Bootstrap specific information but can't find it.

The issue us this: I'm developing a website that uses a lot of dynamic data and processes data afterwards. On PC and tablet everything always works fine but on smartphone it doesn't. When I debug the code there is, obviously, always an error. Ussually it is a too many of class Row and col-xx-nn are on the same div.

This always works on PC and tablet but on smartphone it causes the textfields, buttons and selects to stop functioning.

I know I'll have to debug even more but still: why doest this "buggy" code work on PC and tablet but not on smartphone even if on all three platforms I use the same browser (e.g. Google Chrome)? For smartphone the type of OS makes no difference not does the browser (tried Safari on IOS with the same results).

score -1 · Answer 1 · answered Oct 21 '17 at 15:49

Check out: https://getbootstrap.com/docs/3.3/css/#grid-options it explains how the grid system sizes depending on the viewport [ i.e. col-xs is for mobile (< 768px), col-sm is for tablets (>= 768px, <= 992px), col-md is for desktops (>= 992px, <= 1200px), and col-lg is for larger devices (>= 1200px) ]

Use containers when using bootstraps grid system, I have a small example below that you can throw in your body tag:

<div class="container">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 1</h2>
        <p class="callouts-desc">
            Title 1 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 2</h2>
        <p class="callouts-desc">
            Title 2 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 3</h2>
        <p class="callouts-desc">
            Title 3 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 4</h2>
        <p class="callouts-desc">
            Title 4 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 5</h2>
        <p class="callouts-desc">
            Title 5 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 6</h2>
        <p class="callouts-desc">
            Title 6 paragraph, blah blah blah.
        </p>
    </div>
</div>

Hope this helps!

That part I understand. It is only that when you combine one of the div you listed above with a row class or you mistakenly add another that things go wrong on a smartphone. On the other platforms these errors don't cause the webpage to act wrong (e.g. textboxes are no longer clickable). — BESLO, Oct 22 '17 at 16:49
Ah gotcha, always have to be careful with opening and closing tags, but in regards on how to use containers and rows check out this article that I found helpful: https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc — jstoobz, Oct 22 '17 at 17:05

Bootstrap and Smartphones

1 Answers1