4th set of column classes #9135
Comments
|
If you add a 4th set of column classes you need to add a 4th set for responsive utils |
|
Here is an issue #8883 related to hidden and visible use. |
|
Yep I agree. |
|
How about 5 sets of column classes? I think a set for tiny devices (smaller than 480px), e.g. .col-tn-*, could be very useful. |
|
I think 3 is good. 4 would be handy. But 5 I think it start to be complicated and you lose simplicity. |
|
@tkittich That's the first set of classes, |
|
I've tried the .col-* set, but its grid behavior of "horizontal at all times" doesn't work quite well on tiny devices (smaller than 480px). I'm building a media website. With "col-lg-3 col-sm-4 col-6" class, the output looks nice on screen size of between 480px and 768px: However, on a screen size of 320px, it's too small: To fix this, I believe a tiny set of column classes is needed when screen size is between 480px and 768px -- "col-lg-3 col-sm-4 col-tiny-6 col-12". Or is there a better way to handle this? |
|
@tkittich based on variables.less there are 4 split cut. |
|
@eratzlaff It seems (0 to 480) and (480 to 768) using the same col-* markup is the problem. I cannot find a way to specify (0 to 480) screen to use 12 columns, i.e. collapsed; and (480 to 768) to use 6 columns. |
|
@tkittich Have you tried not specifying Regardless I would agree with splitting the smaller screen sizes. It is essentially the difference between a vertical phone screen and a horizontal phone screen. So some content can look really wide or bunched depending on what it is and the orientation of the phone screen. |
|
@rpedela Without col-* at all, i.e. just "col-lg-3 col-sm-4", the grid would collapse at 768px: |
|
@mdo I am currently running into similar issues where i think it would be really great to introduce I asked this in the main BS3 thread but @cvrebert replied (quite rudely) saying this is "the freaking issue" i needed to reply to. That aside, is BS3 interested even interested in in doing desktops >940 dictated by The column width changes at these points, so it would make sense to be able to switch column counts at these points as well (if desired) since this is possible with each of the other window sizes already. Use case: Now, I understand you could argue that I could just use a smaller ad, but there are a lot of other widgets/elements/things that would create the same problem (eg. a fixed width twitter or facebook widget box, youtube video, etc.) where having the ability to dictate column width on medium devices could really benefit. But is this anything guys want to do? I've seen mentions in other threads saying therw was |
Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in db45a60 c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars
|
Resolved via a2b9988. |
|
Awesome! Thanks @mdo. |
|
Regarding a breakpoint @ 480px: #10203 |
Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the twbs#9128 fix in twbs@db45a60 c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * twbs#9135: fourth grid tier * twbs#9302: undoes previous range change for small grid system, so no need to update any docs here * twbs#8755: consistent grid and responsive utilities schemas) * twbs#9195, twbs#9216, and twbs#9227: no more horizontal scrollbars
Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the twbs#9128 fix in twbs@db45a60 c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * twbs#9135: fourth grid tier * twbs#9302: undoes previous range change for small grid system, so no need to update any docs here * twbs#8755: consistent grid and responsive utilities schemas) * twbs#9195, twbs#9216, and twbs#9227: no more horizontal scrollbars
Currently there are 3 sets of column classes, but 4 default screen sizes as specified here. Specifically
col-lg-*has a double meaning. It is for screen sizes of 992-1200 and 1200+. I would like to see this broken up so that there is one set of column classes for 992-1200 and another separate set of column classes for 1200+.The reason is that some content on the website I am building needs different column settings for medium and large devices.
The text was updated successfully, but these errors were encountered: