Grid breakpoint for 480px

[luaz]

The smallest grid column supported at the moment is .col-xs- (<768px), which seems like a big range.

Would it be advisable to have: .col-xs- (>480px and <768px) .col-tn- (<480px)

Reason being it still seems reasonable to have a 2 column grid on 768px (240px - 384px per column), while 480px have a stacked column.

Using the current .col-xs- (<768px) option, putting one stacked column on 768px seems too wide on some cases, and 2 columns on 480px seems ridiculous at times.

[intelligence]

@andyl I'm sure I'll manage. Thought I was doing something wrong but now I can maybe rule that out. Thanks for having a look :)

[eddieferrer]

@intelligence the problem is that importing @andyl css after bootstrap will have the .col-ms- override the bigger classes. If you just change the media query on bootstrap_ms.css line 18 from:

@media (min-width: 480px)

to:

@media (min-width: 480px) and (max-width: 768px) {

then .col-ms will not override -sm or any of the bigger col classes.

remember bootstrap_ms.css gets imported after bootstrap

[carasmo]

Is there a less version of this? I want to add it.

Actually, since I've been doing mobile first since 2011, I've opted for mobile first ONLY if shared classes, otherwise max-width is used since using important! to override classes inside a min-width is really annoying among other things. Mobile first, when it began, was intended to target screen readers who can't read media queries as well as keep the mobile site from getting all the floats and stuff that it won't use anyway, but loading up the min-width with !importants and having to go mobile first even if it hurts is just silly. Just my two cents.

@media (min-width: 480px) and (max-width: 767px) {

[carasmo]

Never mind. I added it in the .make-grid-columns and in the grid.less and it works so well!

[aaronsbrown]

@andyl Thanks for sharing your addition to the default BS3 grid. I ran into this exact issue designing a new site and was sort of flabbergasted it wasn't considered a basic use case. I'm not sure why the landscape view is getting the short shrift (aside from simply reduced complexity), but I definitely agree this use case will be encountered by a lot of people.

[schurpf]

@andyl thanks for your code and convincing effort. Your class col-ms does overwrite the bootstrap classes for bigger devices.

@eddieferrer if you set a max width, the layout gets back to the small layout above break point.

I have to agree on an additional breaking point in the grid. Bootstrap comes with the promise of being mobile first in 3.0 and than does not have a break point until 768px? This makes the mobile first approach almost impossible to implement. The smaller the screen size the more important the breaking points. Bootstrap offers a lot of fantastic tools and I really like it, but this new break point is a must and should be added in as quickly as possible.

[brgrz]

In Andy's Gist https://gist.github.com/andyl/6360906 if you are using the SASS version change

@media (min-width: $screen-xs) { .container { @media (max-width: $screen-sm ) { max-width: $screen-sm - 20px; } }

to

@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { .container { max-width: ($screen-sm) - 20px; }

If you are using LESS version change to

@media (min-width: @screen-xs) and (max-width: @screen-xs-max) { .container { max-width: (@screen-sm) - 20px; }

then mostly everything turns out fine. Thanks to @andyl for your work on this, I agree, it's totally essential, nevermind what those hipsters from SF say. ;)

[firepol]

Thank you andyl! That's really strange that the bootstrap team, instead of implementing this suggestion for improvement, closed this. Seriously: I'm building a responsive page and I need a good design between 480 and 768 (for users who like to resize a window -I don't think that all desktop users like to have a full screen browser-, or if the page is included in an iframe). This "hack" is the best I've found so far. OMO you should implement it in bootstrap 3.1... anyway, good thing of open source is to fork a project and make a new one... or add "hacks" like this ;)

If somebody needs this: I updated the css as suggested by michaelvandonselaar (767px) and by eddieferrer: https://gist.github.com/firepol/7942411

[cvrebert]

Thank you andyl! That's really strange that the bootstrap team, instead of implementing this suggestion for improvement, closed this.

@firepol Did you bother to read the comments explaining how backwards compatibility prevents us from implementing this at the present time?

[andyl]

@firepol, @cvrebert and future readers - the only person who reported an incompatibility with col-ms was @michaelvandonselaar, and his fix has been applied and tested by a lot of people. So at this point, there is no backwards incompatibility, nothing that prevents col-ms from being added to 3.1.

[carasmo]

Yeah, it's really excellent. Though I incorporated into the grid.less and the mixin.less so updating is a little annoying since I have to paste that back in each time but it's not a big deal. Iff anyone has ideas on how to stick it somewhere else, that would be great.

I my grid.less

// Medium Small grid (added) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
//
@media (min-width: 30.000em) and (max-width: 47.938em) {
  .make-grid-columns-float(ms);
  .make-grid(@grid-columns, ms, width);
  .make-grid(@grid-columns, ms, pull);
  .make-grid(@grid-columns, ms, push);
  .make-grid(@grid-columns, ms, offset);
}

in mixins.less

// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Generate the medium small columns
.make-ms-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-ms-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-ms-column-offset(@columns) {
  @media (min-width: @screen-ms-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-push(@columns) {
  @media (min-width: @screen-ms) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-ms-column-pull(@columns) {
  @media (min-width: @screen-ms-min) {
    right: percentage((@columns / @grid-columns));
  }
}
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Generate the medium small columns

and (I had to put the position:relative on the min-width since my equal column script didn't work when it was before.

// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ NEW COLUMN MEDIUM SMALL ADDED
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-ms-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-ms-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index + 1, ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      // position: relative; // +++++++++++++++++++++++++++++++++++++++++++++++++++++++ this prevents equal heights, put it on the min-widths instead
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

.make-grid-columns-float(@class) {
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
      position: relative; //+++++++++++++++++++++++++++++++++++++++++++++++++++++ added here so that equal columns works
    }
  }
  .col(1); // kickstart it
}

[rcollette]

+1

[adamserafini]

I agree there is a missing breakpoint - and it's not even a problem restricted to portrait vs. landscape.

Some 'phones' (phablets?) are huge now - and a single column which might look OK on an iphone looks ridiculous on a 720 width Samsung Galaxy.

At the moment BS does not have an inbuilt breakpoint for this so I am using this workaround - thanks to @andyl @michaelvandonselaar, @eddieferrer and @firepol for your solutions.

[redorlee]

Really this isn't even an option out of the box!! It seems really self-evident that a break-point below 780 (or whatever it is) is needed. xs is at 780!? It looks terrible when you have to do a single column at that large width... It doesn't even seem like it would be that difficult to implement. I wonder why the team is being so difficult on this one...?

[mdo]

There is no need to be upset @redorlee. As numerous folks have mentioned, it's straightforward enough to add the extra break point if you want it. And I've explained our point of view on this a few times over now. I suppose one more time won't hurt.

• This change affects the behavior of the grid system.
• With every grid tier comes the appropriate container width and responsive utility classes.
• Changing the behavior of the container (not even the columns) for a subset of a current grid tier sounds like us throwing a major curve ball to the majority of folks.
• Adding the columns isn't the problem—doing something misleading or half-implemented is. We won't add another tier without proper documentation, responsive utilities (and associated tests), or container.

It's not a matter of us being difficult—we're trying to not screw over lots of folks who might not see this coming as it does appear to be a potential breaking change.

[andyl]

@mdo - the Bootstrap team keeps insisting that the col-ms class changes the behavior of the grid system. That is not correct. If you look closely at the original col-ms class, and the tweak suggested by @michaelvandonselaar , you'll understand that col-ms does not change the behavior of existing apps in any way. At this point, lots of people have tested the solution.

There is still demand for an off-the-shelf breakpoint for mobile devices, months after the issue was closed. The col-ms breakpoint is really simple, and I hope it will be included in Bootstrap 3.1 !!

[mdo]

@andyl What about the .container—just ignored it and go full-width? And the responsive utilities? And documentation to support it all? We won't be implementing another grid tier half-way.

[andyl]

@mdo - three people have posted .container solutions on this thread ( @michaelvandonselaar, @eddieferrer and @brgrz ) I think any of them will work. Responsive utilities (visible-ms and hidden-ms) aren't written - but I could do that if you like. Docco - yeah - I could write that too (grid options and responsive utilities).

[rcollette]

@mdo If the problem is completeness, why not mark it as an open item with a targeted milestone. I think the thing that is frustrating a lot of people is the fact that it is closed which doesn't convey that it won't be done unless complete, it conveys that it won't/can't be done at all. If you're indeed saying it won't/can't be done at all, it seems very short sighted. If you're not saying it won't/can't be done, then please open it back up so that users can at least be relatively aware of this issue.

[mdo]

@andyl The .container no longer uses max-width though, and I'm still unclear how that doesn't change the behavior of the grid. Adding another breakpoint to the .container that changes the width will affect everyone, not just those wanting to use this new tier, right? See https://github.com/twbs/bootstrap/blob/master/less/grid.less#L6:L22.

And if we wanted to add the responsive utilities, that changes the other responsive grid utilities—or at the very least creates some overlap, right?

[carasmo]

The 480 - 767px is a min and max for this and it doesn't overlap, so the responsive utilities wouldn't overlap since they're inside the same, right?

[mdo]

@carasmo Right now, the xs responsive utilities span 0 to 767px. Adding the proposed ms classes would range 480px to 767px. Either they overlap, or the xs utilities are rewritten to not interfere (can't do until v4).

[andyl]

@mdo - if you don't use the col-ms class, then col-xs continues to operate as normal, and existing apps would notice no change. Having said that - it seems like col-ms isn't going to happen for 3.1. That's unfortunate but not the end of the world - the hack will still work.

[mdo]

Having said that - it seems like col-ms isn't going to happen for 3.1.

Who said that? v3.1 won't drop until early January. My only reservations are that this is an incomplete implementation (responsive utilities) and that this also affects .containers for folks who don't use the new classes. It's also a little confusing given how the existing grid system tiers work, but the right example and docs to support it would likely eliminate most of the confusion.

If those items are addressed, we can likely get this in for the release. As of this moment though, I'm still not convinced this doesn't break something in the existing code base and grid system behavior.

[carasmo]

So far, simply using it (without any responsive utilities) has been great. There's been no issues at all.

[firepol]

Dear all, I think I understand @mdo point of view that this ms feature, to be properly implemented, will require a bit of work and testing (this is true for every improvement...). @andyl (thx again man for posting your css!) and some other people tested it, and saw no problem in using the ms "hack". I also tested it and I can post here my little contribution in the discussion. I created a little tool to send e-cards (feel free to use it). I wanted the form to look nice also between 480 and 768 px, so the "ms" hack came handy for this purpose.

Please compare yourself:

form without ms hack: http://test.pbworks.ch/ecard-no-ms

form with ms hack: http://test.pbworks.ch/ecard-ms

Resize the window, so that the window width will be less than 768px, but more than 480px. I personally don't like the "no-ms" (standard bootstrap) version: as soon I make my browser window smaller than 768px -even if the screen has full of available space- I get the ugly form made for mobile devices. I really don't like it: I'm on desktop, doesn't mean I browse with a full screen window all the time (especially having a big screen with a big resolution, something quite normal for many people in 2013).

On the other hand, on my mobile device (Samsung Galaxy S3), when I browse the web in landscape mode, the form with the ms hack look nicer than the original bootstrap one (even my girlfriend confirmed so) and saves me from scrolling down. Yes I know that people are used to scroll and scroll on mobile. Doesn't mean they have to do it for every form on the web...

The only difference (maybe it's wanted so, and not an issue) I noticed: the form labels in the ms solution are not aligned on the right. @andyl, @carasmo ideas? Maybe my css doesn't contain some last improvements you did, or as mdo mentioned, some responsive css are missing... if so let me know and I can update the css in the "ms" page. As said, to fully implement this ms solution, some more hours of work are needed. Let's do it!

We have the power to make the web a better place and to give people a nice user experience. I really hope that the ms solution will be implemented in bootstrap soon. Thank you.

[carasmo]

The .form-horizontal .form-group .control-label is only text-align: right at the min-width, so it's up to us, the users of this addon to add the appropriate css inside the col-ms media query. Might work:

.form-horizontal .form-group .control-label {text-align:right;}

[firepol]

@carasmo thank you. CSS updated: https://gist.github.com/firepol/7942411

Also the form looks better: http://test.pbworks.ch/ecard-ms

[freddyboucher]

This feature is so essential, please make it in 3.1 release

[outdoorsman]

PLEASE add another breakpoint below 768... this is really needed!!!

[samuelhough]

I just wanted to throw in my hat saying that we are running into this exact issue with the bootstrap grid on the product I'm working on. I would really love it if you guys would consider adding another size to more specifically target smaller devices in a future release.

[runbrun]

Well i tried to add less but somehow it breaks the grid system.. I have done another quick fix that works for me... i use a custom .ms class along with col-xs classes to maintain columns no matter what and set a specific breakpoint for .ms say 600px and make them width:100%

@media (max-width: 600px) {
  .ms {
    width: 100%;
    float: none;
    display: block;
    min-height: 1px;
  }
}

[dezio1900]

I cannot believe 480 breakpoint isn't still implemented. What a shame for BS developers. :S

[carasmo]

Easy enough to add on your own in a few min.

[langwellenreiter]

Easy enough... but multiply the work by thousands and you got a lot of wasted hours... +1 for adding this to BS

[zzseba78]

Bootstrap Team: add 480 breakpoint and you will achieve almost perfection! :)

[mdo]

Read the comments and you'll understand why we haven't yet.

[dezio1900]

@mdo I cannot believe that you think one breakpoint is enough for 0-767px. 767px for one break point!!??

If its logical, why bootstrap then doesnt have this approach: /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 1536px and up) / / 768 + 768 */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 2304px and up) / / 768 + 768 + 768 */ @media (min-width: @screen-lg-min) { ... }

Is this logical? You obvious doesn't know that mobile devices has two orientation, and that good UE is to show different layout for different orientation. So every logical developer will do something like this if adding new breakpoint has impact on performances:

/* DEFAULT : MOBILE UPTO 479px */

/* Small devices (tablets, 480px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 768px and up) */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

[carasmo]

@dezio1900

Add it yourself.

This is a free, awesome, framework. I don't understand why, when we change fonts, colors, and various other things, we can't take, literally, a few more minutes to add the breakpoint ourselves until it's been tested and added into another iteration in the near future.

[dezio1900]

Its not a big problem for me to add it by myself. Problem is that BS developers doesn't want to confess that they are making a mistake by ignoring mobile devices. Maybe they only use tablets and desktops, but they must admit that mobile devices are also important. Responsive design isn't really responsive if we don't have 480 bp.

I just cannot believe that someone thinks that layout for 320px and 480px+ should be the same...

[carasmo]

There's no confession required, they don't owe us diddly squat. 767px is and was a common breakpoint to start stacking, and when the need arises for use of something between there, roll it yourself.

[zzseba78]

I think we need to digg into "Media queries breakpoints", 4 breakpoints it´s more than enough, first time i set breakpoints the grid breaks up ( i set it wrong :) ), but with some tweaking it gets right. Bootstrap is awesome, works great, it´s simple, it´s clean, and IT´S FREE. Let's not complain so much, these people do a great job. Cheers from Uruguay ( country of legal marihuana :) )

[chrisabrams]

I get you can't add every possible device breakpoint, but the lack of a 320px breakpoint is surprising.

[mdo]

@mdo I cannot believe that you think one breakpoint is enough for 0-767px. 767px for one break point!!??

I just cannot believe that someone thinks that layout for 320px and 480px+ should be the same...

@dezio1900 On the contrary, I definitely want to support it, and I've made that quite clear. However, I cannot in good faith change the behavior of .containers and responsive utilities for folks who haven't accounted for this new breakpoint in their code. The potential for broken code is quite high. You'd know that if you read my previous comments, as I asked you to earlier.

Is this logical? You obvious doesn't know that mobile devices has two orientation, and that good UE is to show different layout for different orientation.

You assume ignorance on my part when you haven't spent a fraction of the time I have with this, or any other part of Bootstrap. You're also making broad and inaccurate statements about several topics. There is no one perfect solution for everyone.

Problem is that BS developers doesn't want to confess that they are making a mistake by ignoring mobile devices.

As the very kind and helpful @carasmo has mentioned, there is no confession to be made. Once again, you assume ignorance on our part, and on top of that you add malice—as if we intentionally want to make your life more difficult.

Maybe they only use tablets and desktops, but they must admit that mobile devices are also important.

One more time, read my previous comments. We want it, but cannot do it until v4.

Responsive design isn't really responsive if we don't have 480 bp.

Says who? Again, every project is different.

---

I get you can't add every possible device breakpoint, but the lack of a 320px breakpoint is surprising.

@chrisabrams I'll tack this reply on here as well—read my previous comments, and perhaps the entire discussion here. It cannot happen without changing the .container and responsive utilities for the surrounding breakpoints, and that breaks backward compatibility.

[dezio1900]

Ok, sorry for not reading all replies from you. Its a good thing if you plan to implement this in v4.

Just cannot figure out why BS needs to be backward compatible? If I use BS 3 for one project, why would I update BS for that project? If I am starting a new project, I will use latest BS, so I cannot figure out why is backward compatibility so important.

[mdo]

Just cannot figure out why BS needs to be backward compatible?

@dezio1900 When your code is used by millions of people, version control and backward compatibility are pretty important.

[antespi]

Thanks @andyl and others for inspiration. Here you have the pull request for HS breakpoint at 480px (Horizontal Small, not ms, because it can be confusing with sm breakpoint) https://github.com/twbs/bootstrap/pull/12586 This is a less modification that you can customize with your needs. Includes col-hs, col-hs-pull, col-hs-push, col-hs-offset, container, visible-hs, hidden-hs @mdo, I understand your decision about not include this to current master (for compatibility), but you have the code for next version you consider to include (maybe 4.x).

[donquixote]

@mdo The only BC argument so far has been the .container. Imo, we don't need to do anything about the container. Let the container width continue to be fluid-width 0-767px, as it is today. If we get a new .col-smaller-* (or ms, tn, etc) with min-width 480, that should be enough to make most people happy I imagine.

[donquixote]

To make this feel more "right" for stuff involving max-width: To not break BC, we should regard newly added ranges as subdivisions of the existing ranges. So, xs still means 0 - 767 or 0 - *, depending if you are interested in max-width or not. But there can be new sub-ranges:

• xs = 0..767 or 0..*
• xs-A = 0..479 or 0..*
• xs-B = 480..767 or 480..*
• sm = 768..991 or 768..*
• md = 992..1199 or 992..*
• lg = 1200..*
• lg-A = 1200..1599 or 1200..*
• lg-B = 1600..*
• This could be A, B, C, .. instead of just A, B.

Obviously, as soon as we introduce one such a new breakpoint, we jam the door for future breakpoints. E.g. if we introduce xs-A and xs-B but then recognize we want an xs-C, this will be no longer possible. Instead, we could introduce an xs-B1 and xs-B2 to further subdivide xs-B.

[donquixote]

If anyone wants the bootstrap.css from the above PR for download: https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision