col-xs offset?

[dongepulango]

Is it good to have offset in col-xs? Because I'm putting an extra col that only visible in mobile just to achieve the offset. I'm not an expert on this, but I don't understand why there is no offset in col-xs.

[mdo]

I'm not sold that it's necessary—it's an awfully narrow viewport on phones and I can't think of that many compelling reasons to add them (and thus push/pull classes).

[jonjaques]

Sure, pushing around columns on a 320px screen is probably not a great idea—but given that the smallest breakpoint is 768px, don't you think this warrants some consideration?

In fact, it almost seems contrary to the idea of "mobile-first", to not have col-offset at the smallest grid size.

Here's a use case for a login page. I don't want the lighter colored box to touch the edge of the page, but at the larger end of the breakpoint, the inputs would be comically large and that's what I'm trying to avoid here.

[hsukenooi]

Maybe a reason to include it is we're told to use .col-xs-* for a non-responsive template (http://getbootstrap.com/examples/non-responsive/). Without .col-xs-offset-* we can't use offsets in a non-responsive template.

[mdo]

That's a really good point actually. Hmm...

[mdo]

Reopened and will slate for v3.1.

[dongepulango]

👍 to @hsukenooi

[KOTRET]

👍 on devices with 320px this maybe does not make much sense, but for < 768px it still does. also its not very consistent atm. also it is possible to set the breakpoints manually and force xs to be like 900 or so...

[ghost]

I second that. 768px is not that small a width that would never require offsetting.

[buschtoens]

Ran into this aswell. I would really like to see those.

[halcyonandon]

I hit this same issue and I think this will be pretty common in cases where you need a responsive image to appear after a heading tag, but it visually needs to appear before it.

My use-case is, I have an article image that appears after the <h1> in the dom, but needs to visually appear before the <h1>. I use this class to rearrange. I was originally adding it to a 'collapse' menu list for xs, but my requirements have changed and I now need to use col-xs-6 with col-xs-pull-6 in combination with img-responsive to show a thumbnail version of the 300x300px image on mobile without collapsing. This will also likely be the case for the our search results' thumbnails too.

For SEO purposes, its more ideal to have an image ordered in the dom after its heading title. Also, if we decide to later collapse content by headings, this approach ensures all the content appears after it.

[cvrebert]

Folks, we don't need any more "+1"s; this is already planned for v3.1.

[cvrebert]

Fixed by #11050.