Bootstrap responsive grid not working with mobileangularui

Question

I am trying out the responsive grid in bootstrap. I have created a project in Angular JS, mobile-angular-ui and phone gap.

In one of the html pages, I have the following code.

<div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6">Jane Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">House 10, Street 8, City.</div>
      <div class="col-xs-12 col-sm-6 col-md-6">John Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>

I tried this out in screen sizes 320x480 (iPhone 4) and 768x1024 (iPad). What I wanted to happen is:

on the iphone's screen size, it should have shown a table with 1 column and 4 rows
on iPad's screen size it should have shown a table with 2 columns and 2 rows.

However, the result is as the same for both:

iPad:

iPhone:

Desktop Browser:

How do I achieve this behaviour?

Did you include the [viewport tag](http://getbootstrap.com/css/#overview-mobile) in your document's head? — Tieson T., Nov 19 '15 at 06:19
I just changed that to `yes` and the result is unfortunately the same. — mridula, Nov 19 '15 at 06:43
`` is what's recommended, as noted above. Is there a reason you're trying to constrain the viewport? — Tieson T., Nov 19 '15 at 06:46
I am using `phonegap` and `mobileangularui`, and when i generated a new project in `mobileangularui`, the `index.html` was generated with these tags. I tried the recommended tag, but the result is still the same. On the desktop resolution, the result is as I expect: 2 rows and 2 columns. Also, on the iphone's resolution it is what I expect: 4 rows and 1 column. But not on iPad. — mridula, Nov 19 '15 at 06:52

score 3 · Answer 1 · answered Nov 19 '15 at 08:13

3

Add this link in your head tag

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

answered Nov 19 '15 at 08:13

Vignesh V

31
4

score 0 · Accepted Answer · edited May 23 '17 at 12:18

After a lot of testing with different permutations and combinations, we came to the conclusion that the sm screen size is getting ignored. Probably a bug in mobile-angular-ui?

The responsiveness is working for the xs and md screen sizes. As I successively increase the screen size, the responsiveness jumps from xs to md.

So, I changed the default screen sizes in mobile-angular-ui as per my requirements and used only the xs, md and lg size classes.

<div class="row">
    <div class="col-xs-12 col-md-6 col-lg-3">Jane Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">House 10, Street 8, City.</div>
    <div class="col-xs-12 col-md-6 col-lg-3">John Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>

Bootstrap responsive grid not working with mobileangularui

2 Answers2