6 ms·

What’s New in Bootstrap 4

184 points by scotchio 11y ago

thecodemonkey 11y ago
I literally just asked myself that question yesterday but couldn't find any good information on it. Nice write-up!
- scotchio 11y ago
  Most of everything in this article is taken from their blog posts, their new docs, looking through the source, and checking out the Bootstrap 4 pending Pull Request [1]. Really just wanted to test all the new features and see what was what with it. Decided to make some demos to compare some stuff too. [1] https://github.com/twbs/bootstrap/pull/17021 https://github.com/twbs/bootstrap/pull/17021
  - bliti 11y ago
    Yes, thanks for the post. Helps to understand the differences quickly. I'm in the process of planning an update to B4 and it will save me lots of time.
  - boundlessdreamz 11y ago
    What's the advantage of @media (min-width: 48em) { ... } over @media (min-width: @screen-sm-min) { ... } is the only benefit the additional media query? @media (min-width: 34em) { ... } But users could have already specified it in bootstrap 3 if they wanted?
mokkol 11y ago
Thanks for the post! very useful
itcodes 11y ago
I will never be able to understand why the grid class names are abbreviated. It's borderline unreadable and it's one of the primary reasons I avoid bootstrap when I can. Foundation is much better in this regard class="large-6 columns" makes much more sense than class="col-lg-6". This is a good article though. I've been wondering what changed in the new version.
- sirtastic 11y ago
  Seriously? Col is too difficult to understand as an abbreviation for column?
  - itcodes 11y ago
    It takes longer to parse. The same way "Wht r u talking abt" takes longer to parse than "What are you talking about". The former requires my brain to do several extra lookups before I arrive at the meaning. I would rather just type the extra characters for the words Column and Large.
    - wvenable 11y ago
      After you've typed a thousand of these things your brain will just be doing a single lookup. From a newbie perspective, your opinion has merit but for long-term use it makes less sense.
      - nailer 11y ago
        Long term, making sure people use proper names for things is a great to make sure people are writing code for others to read.
- scotchio 11y ago
  You can also do wildcard selecting with the namespaced approach. E.g.: [class^="col"] { /* blah */ }
- benologist 11y ago
  Skeleton's also nice at this: class="six columns"
- nailer 11y ago
  class="marketing" is even better. Then you put your styling in a style sheet. You use border box by default since it's 2015, the parent uses flex, and set the width to 50%.
dimgl 11y ago
So, much ado about nothing
- blowski 11y ago
  Actually, there's a lot of stuff in there that I'm going to find useful. The flexbox integration is great, and hopefully will lead to wider adoption of flexbox in general. Cards are something I've had to implement myself, and the core one looks much nicer. Perhaps it's not going to be useful for you, but for me, I'm grateful for all the work put in by those involved in this open source project.
  - scotchio 11y ago
    Seriously I love that they added cards and dropped Panels and Wells. I used to have to create something like cards on nearly every project and used Panels/Wells maybe once.
    - orky56 11y ago
      Agreed! What I like about Bootstrap's development is giving people the flexibility to jump into something new like panels/well & then look for other plug-ins/hacks to customize the experience. Once those trends become more mainstream, they do us all a favor and incorporate them more cleanly. Cards are such a natural extension for a responsive layout.
  - lojack 11y ago
    You know if the flexbox addition includes fallback for browsers without flex support?
    - blowski 11y ago
      If you mean IE9, then no it doesn't. I'm not sure how it handles IE10.
      - realityking 11y ago
lemevi 11y ago
I'm glad they're supporting Bootstrap 3. The switch to Sass is unfortunate. I never had a problem with compile times and being able to pick and choose the bootstrap I needed in my own less build was really nice. I don't think I'll be using newer versions of Bootstrap. Once they stop supporting 3 I think I'll move on to a new CSS framework. I just think they shouldn't change builds like this on frameworks that are already widely used. I'm sure Sass developers were making use of Compass or other Sass frameworks if they needed to integrate the framework with their own builds.
- carsongross 11y ago
  Switching to sass this late in the game is crazy and deeply pointless. Sass mafia got to them, I guess.
  - andruby 11y ago
    If you're used to Less, Sass won't feel that much different. Why don't you give it a try?
    - carsongross 11y ago
      If you are using Less, why bother with Sass, since it isn't that much different? NB: It's their project, they can do whatever they want, and I'm extremely thankful to everyone who has contributed to what I consider the most important project for web usability in the last decade. But I still view this as a deeply pointless change that will cause lots of unnecessary pain.
      - Gigablah 11y ago
        "Lots of unnecessary pain" -- such as?
- realusername 11y ago
  I don't know, I never really liked Less and never understood why they picked it over Sass in the first place. In Less everything looks quite slick until you start doing loops, loops are just looking terrible (you can have a look at the documentation here: http://lesscss.org/features/#loops-feature http://lesscss.org/features/#loops-feature). Since having loops is a big advantage of having a preprocessor, I never understood why Less was so popular.
draebek 11y ago
"It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3." I'm kind of surprised. No doubt some user bases have user bases running newer browsers, but with IE 8 still sitting at ~13% market share[1] I suspect this will prevent many people from using Bootstrap 4, including myself. [1]: https://www.google.com/search?q=ie8+market+share https://www.google.com/search?q=ie8+market+share
- thedufer 11y ago
  I don't know where Net Market Share is getting their data, but that's _way_ off compared to literally everyone else who's reporting. The tip-off for me was that they report all of Firefox+Chrome as ~10%. See https://en.wikipedia.org/wiki/Usage_share_of_web_browsers https://en.wikipedia.org/wiki/Usage_share_of_web_browsers - the IE share reported on that site is being overestimated by at least 2.5x and more likely around 4x. Or everyone else is getting it completely wrong, I guess.
  - AJ007 11y ago
    I'm at a fraction of a percentage for IE 8 as of yesterday in a sampling of over 100,000 sessions. If the sample is from desktop only users, that numbers moves up. That is still a large enough number to matter for a startup where those make or break growth & retention numbers matter. It would be insane to throw out 1% of your visitors while other employees are doing cartwheels in A/B testing for 2% improvements. The general principle I follow is drop support if a platform no longer receives security updates. The second part of that is to continue to produce a simplified version of your site that should work on all browsers. This provides big benefits for disability access, low bandwidth users (which is all of the developing markets), and edge cases.
    - deleted 11y ago
      [deleted]
    - wj 11y ago
      Probably depends on a site's audience. I know in the financial industry that an unfortunately large amount of people still use IE8 as many vendor websites require it (long live Active X). But I imagine the visitors to many B2C websites no longer use IE8.
chao- 11y ago
Flexbox and Sass-first is a nice surprise, but the switch to rems steals my attention. I know that backwards-compatibility goals kept them on px, but that has long been my one complaint with Bootstrap (as a regular user, not as that guy who "would use it except [minor reason]").
- FilterSweep 11y ago
  I stayed away from Bootstrap 3 for that very reason in my front-end work. I would keep my own REM and %age-based "starter grids" (1, 3, 4, 6 and 12 column grids), along with a more simplistic <!--[if IE ]> pixel-based grid (IE = rounding problems), on a USB stick which I would carry around from project to project - allowing me to quickly mobilize from site wireframe to initial mockup with a very short turnaround. For anyone who wants to waste the setup time that I did, I used calculations by-hand along with the "Responsive Grid Calculator"[0] The other thing selling me over is the _opt-in_ flexbox support as well. If your client has only one big user who is on IE8, and this includes more non-tech companies than I'd like to acknowledge, you will undoubtedly have to support IE as well. [0]http://www.responsivegridsystem.com/calculator/ http://www.responsivegridsystem.com/calculator/

184 points by scotchio 11y ago

thecodemonkey 11y ago

I literally just asked myself that question yesterday but couldn't find any good information on it. Nice write-up!

scotchio 11y ago
Most of everything in this article is taken from their blog posts, their new docs, looking through the source, and checking out the Bootstrap 4 pending Pull Request [1]. Really just wanted to test all the new features and see what was what with it. Decided to make some demos to compare some stuff too. [1] https://github.com/twbs/bootstrap/pull/17021 https://github.com/twbs/bootstrap/pull/17021
- bliti 11y ago
  Yes, thanks for the post. Helps to understand the differences quickly. I'm in the process of planning an update to B4 and it will save me lots of time.
- boundlessdreamz 11y ago
  What's the advantage of @media (min-width: 48em) { ... } over @media (min-width: @screen-sm-min) { ... } is the only benefit the additional media query? @media (min-width: 34em) { ... } But users could have already specified it in bootstrap 3 if they wanted?

mokkol 11y ago

Thanks for the post! very useful

itcodes 11y ago

I will never be able to understand why the grid class names are abbreviated. It's borderline unreadable and it's one of the primary reasons I avoid bootstrap when I can. Foundation is much better in this regard class="large-6 columns" makes much more sense than class="col-lg-6". This is a good article though. I've been wondering what changed in the new version.

sirtastic 11y ago
Seriously? Col is too difficult to understand as an abbreviation for column?
- itcodes 11y ago
  It takes longer to parse. The same way "Wht r u talking abt" takes longer to parse than "What are you talking about". The former requires my brain to do several extra lookups before I arrive at the meaning. I would rather just type the extra characters for the words Column and Large.
  - wvenable 11y ago
    After you've typed a thousand of these things your brain will just be doing a single lookup. From a newbie perspective, your opinion has merit but for long-term use it makes less sense.
    - nailer 11y ago
      Long term, making sure people use proper names for things is a great to make sure people are writing code for others to read.
scotchio 11y ago
You can also do wildcard selecting with the namespaced approach. E.g.: [class^="col"] { /* blah */ }
benologist 11y ago
Skeleton's also nice at this: class="six columns"
nailer 11y ago
class="marketing" is even better. Then you put your styling in a style sheet. You use border box by default since it's 2015, the parent uses flex, and set the width to 50%.

dimgl 11y ago

So, much ado about nothing

blowski 11y ago
Actually, there's a lot of stuff in there that I'm going to find useful. The flexbox integration is great, and hopefully will lead to wider adoption of flexbox in general. Cards are something I've had to implement myself, and the core one looks much nicer. Perhaps it's not going to be useful for you, but for me, I'm grateful for all the work put in by those involved in this open source project.
- scotchio 11y ago
  Seriously I love that they added cards and dropped Panels and Wells. I used to have to create something like cards on nearly every project and used Panels/Wells maybe once.
  - orky56 11y ago
    Agreed! What I like about Bootstrap's development is giving people the flexibility to jump into something new like panels/well & then look for other plug-ins/hacks to customize the experience. Once those trends become more mainstream, they do us all a favor and incorporate them more cleanly. Cards are such a natural extension for a responsive layout.
- lojack 11y ago
  You know if the flexbox addition includes fallback for browsers without flex support?
  - blowski 11y ago
    If you mean IE9, then no it doesn't. I'm not sure how it handles IE10.
    - realityking 11y ago

lemevi 11y ago

I'm glad they're supporting Bootstrap 3. The switch to Sass is unfortunate. I never had a problem with compile times and being able to pick and choose the bootstrap I needed in my own less build was really nice. I don't think I'll be using newer versions of Bootstrap. Once they stop supporting 3 I think I'll move on to a new CSS framework. I just think they shouldn't change builds like this on frameworks that are already widely used. I'm sure Sass developers were making use of Compass or other Sass frameworks if they needed to integrate the framework with their own builds.

carsongross 11y ago
Switching to sass this late in the game is crazy and deeply pointless. Sass mafia got to them, I guess.
- andruby 11y ago
  If you're used to Less, Sass won't feel that much different. Why don't you give it a try?
  - carsongross 11y ago
    If you are using Less, why bother with Sass, since it isn't that much different? NB: It's their project, they can do whatever they want, and I'm extremely thankful to everyone who has contributed to what I consider the most important project for web usability in the last decade. But I still view this as a deeply pointless change that will cause lots of unnecessary pain.
    - Gigablah 11y ago
      "Lots of unnecessary pain" -- such as?
realusername 11y ago
I don't know, I never really liked Less and never understood why they picked it over Sass in the first place. In Less everything looks quite slick until you start doing loops, loops are just looking terrible (you can have a look at the documentation here: http://lesscss.org/features/#loops-feature http://lesscss.org/features/#loops-feature). Since having loops is a big advantage of having a preprocessor, I never understood why Less was so popular.

draebek 11y ago

"It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3." I'm kind of surprised. No doubt some user bases have user bases running newer browsers, but with IE 8 still sitting at ~13% market share[1] I suspect this will prevent many people from using Bootstrap 4, including myself. [1]: https://www.google.com/search?q=ie8+market+share https://www.google.com/search?q=ie8+market+share

thedufer 11y ago
I don't know where Net Market Share is getting their data, but that's _way_ off compared to literally everyone else who's reporting. The tip-off for me was that they report all of Firefox+Chrome as ~10%. See https://en.wikipedia.org/wiki/Usage_share_of_web_browsers https://en.wikipedia.org/wiki/Usage_share_of_web_browsers - the IE share reported on that site is being overestimated by at least 2.5x and more likely around 4x. Or everyone else is getting it completely wrong, I guess.
- AJ007 11y ago
  I'm at a fraction of a percentage for IE 8 as of yesterday in a sampling of over 100,000 sessions. If the sample is from desktop only users, that numbers moves up. That is still a large enough number to matter for a startup where those make or break growth & retention numbers matter. It would be insane to throw out 1% of your visitors while other employees are doing cartwheels in A/B testing for 2% improvements. The general principle I follow is drop support if a platform no longer receives security updates. The second part of that is to continue to produce a simplified version of your site that should work on all browsers. This provides big benefits for disability access, low bandwidth users (which is all of the developing markets), and edge cases.
  - deleted 11y ago
    [deleted]
  - wj 11y ago
    Probably depends on a site's audience. I know in the financial industry that an unfortunately large amount of people still use IE8 as many vendor websites require it (long live Active X). But I imagine the visitors to many B2C websites no longer use IE8.

chao- 11y ago

Flexbox and Sass-first is a nice surprise, but the switch to rems steals my attention. I know that backwards-compatibility goals kept them on px, but that has long been my one complaint with Bootstrap (as a regular user, not as that guy who "would use it except [minor reason]").

FilterSweep 11y ago
I stayed away from Bootstrap 3 for that very reason in my front-end work. I would keep my own REM and %age-based "starter grids" (1, 3, 4, 6 and 12 column grids), along with a more simplistic <!--[if IE ]> pixel-based grid (IE = rounding problems), on a USB stick which I would carry around from project to project - allowing me to quickly mobilize from site wireframe to initial mockup with a very short turnaround. For anyone who wants to waste the setup time that I did, I used calculations by-hand along with the "Responsive Grid Calculator"[0] The other thing selling me over is the _opt-in_ flexbox support as well. If your client has only one big user who is on IE8, and this includes more non-tech companies than I'd like to acknowledge, you will undoubtedly have to support IE as well. [0]http://www.responsivegridsystem.com/calculator/ http://www.responsivegridsystem.com/calculator/