Top 5 Bootstrap 4 Features Coming in 2015

I am Kevin Rhodes Kevin Rhodes 3 years ago 8 min read

Oh, Twitter Bootstrap. How I adore you. You’re most popular framework in the world, and for good reason. Being the web design geek I am, I was so exited to see a recent post on Bootstrap’s official blog regarding Bootstrap 4. Slated for release it late December 2014, I gathered the top 5 most anticipated and confirmed features of Bootstrap version 4.

1. Modified Grid System

Bootstrap 3 has always had a rock solid grid system. It makes designing responsive sites effortless. In Bootstrap 4, we shouldn’t be seeing a complete overhaul. According to the developers we will see at least one additional tier for handheld devices.

Severity of change: Minor

This shouldn’t be too difficult to learn. And it’s optional,  if you want to target a specific device size. If will probably require a simple appending of an extra class name. From least to greatest, it might be something like col-lg-* col-md-* col-hd-* col-sm-* and col-xs-*.

2. Completely Redesigned Navbar

Probably the hardest and most discouraging things about using Bootstrap 3 is the navbar. It’s tough to figure out. I mean there are so many class names to make it. Adding image as your logo is damn near impossible. They tried to add this in Bootstrap 3.3, but it’s too little too late for me.

We don’t have specific details about how the Navbar in Bootstrap 4 will behave on mobile. But hopefully it is less generic then .navbar-collapse currently implemented today. And maybe we will get some off-canvas navigation? Like the Jasney Bootstrap add-on pack provides?

Severity of change: Huge

Odds are, you’ll have to restructure the HTML of your current navigation. But it will greatly reduce all those extra helper classes you’ve been adding trying to fix Boostrap 3’s navbar. Essentially, it’s totally worth it.

3. Brand New Documentation

The docs for Bootstrap have always been a bit clucky. For starters, sometimes I don’t know whether to look in the CSS section, or Javascript section. That side navigation bar is clucky (I always forget the back-to-top link).

Severity of change: Medium

Ok, so the title says “Brand New” documentation. But that means brand new layout. Not necessarily content, which you are used to.

Check out a preview image of Bootstrap 4’s documentation I found on Dribbble from the creator of Bootstrap himself, Mark Otto.

bootstrap-4-docs
Bootstrap 4 Docs preview posted by Mark Otto on his Dribbble account

4. Animations and Transition on Components

Bootstrap has never been very animation rich. I mean, yes, you do currently have animations for collapse accordions and the like, but those really don’t provide gigantic wow factor. Looking at Google’s Material Design, it would only be natural for the most popular web component library to follow. Hmmm, I wonder if we might see some of Daniel Eden’s powerful Animate CSS.

Severity of change: Medium

Animations in Bootstrap 4 could indeed look really appealing, if users are not utilizing them wisely, they may be used all the time. Or used in the right context.

5. A new approach to global theming

This is most interesting to me. Currently, if you want to customize Bootstrap 3, you can:

  • Override with a RAW CSS files (the hard way to do it)
  • Customize less files on Bootstrap’s customize page (the hard way to do it)
  • Duplicate Bootstrap’s LESS variables file and override the original (the best way to do it)

I wonder what they are going to do here? Maybe provide a special file completely focused on customizing colors, border-radius, etc?

Severity of change: Minor

You are always going to be able to continue your normal workflow. So this change should have little impact if you  don’t care about having the folks at Twitter tell you how to make a theme.

6. Bonus – All features

We have to learn to trust the Twitter Bootstrap. Like I stated earlier, they are popular for good reason.  I’m always a bit worried about the ease of upgrading, but I’m sure that will be well thought.

Here is a complete list of what’s to come:

  • Updated grid system with at least one additional tier for handheld devices.
  • A brand new component to replace panels, thumbnails, and wells.
  • A completely new, simpler navbar.
  • Switch all pixel values over to rems and ems for easier and better type and component sizing.
  • Dropped support for IE8.
  • Tons of form updates, including custom form controls.
  • New component animations and transitions for several components.
  • UMD support throughout our JavaScript plugins.
  • Improved JavaScript positioning for tooltips, popovers, and dropdowns.
  • Brand new documentation (written in Markdown, too!).
  • A new approach to configuring global theming options.
  • And hundreds more changes across the board.
  • Perhaps something with “stickers”? See pic below.
bootstrap-4-stickers
Bootstrap 4 “Stickers” posted by Mark Otto on his Dribbble account

Additional Resources

Bootstrap Blog
Bootstrap Twitter
Mark Dotto’s Personal Site (Creator of Bootstrap)
Mark Dotto’s Dribbble
Mark Dotto’s Twitter

Follow Kevin:
  • Rashad Reed

    Thank you for the post. I’m new to web development and design and I think that Bootstrap would help me out tremendously.

    • http://www.iamkevinrhodes.com Kevin Rhodes

      Bootstrap is a great framework. Hopefully Bootstrap 4 is even easier.

  • Oli101

    The question is when will Bootstrap 4 be released. Will it be released this year and if so, does anyone know the release date? Or will it be released next year?

    • Дебелян Пеевски

      next year for sure … around may

      • WiseFundManager

        That’s an eternity in internet time.

        • http://striderlance.com/ Alexei Raiu

          May get outdated even before its released.

  • Ymiquel

    Where can I see a Bootstrap 4 demo online?

    • WiseFundManager

      Google it…must people do everything for you?

  • Maksim Vi.

    Wow all these speculations are based just on one tiny getbootsrap docs concept?

  • Daniel Schwartz

    What’s the latest on bootstrap 4 ?

  • http://www.anjithsasindran.in/ Anjith Sasindran

    Nice article Kevin. I’ve been using Bootstrap 3 for over 8 months now. Waiting for Bootstrap 4 to revamp my website!

  • Bart

    Point 5: LESS will be replaced by SCSS.

    • Jannik Portz

      Btw there already is a SASS version of twb3 https://github.com/twbs/bootstrap-sass
      In the _variables.scss they use the !default keyword, which makes it super easy to ‘modify’ variables before actually importing bootstrap. With LESS you has to import your custom variables.less file after the bs variables to re-assign values, which ended up really messy sometimes.

  • jvivs

    So this is like a laundry list of features being ported from Foundation? Next up: a reasonable upgrade path?!

  • Himanshu

    Bootstrap is a great framework. Hopefully Bootstrap 4 is even easier. I Am Waiting For New version…

  • Nikolay Kozlov

    What about Flexbox model in Bootstrap 4?

  • http://wulkan.me/ Alex

    Still just starting to learn the current version of Bootstrap. Hopefully the new version will come sooner than later, so that I can learn new stuff from the start. 🙂

  • Alon Amir

    What about ~300ms tap delay on iOS, and “:hover stuck state” on mobile devices?

    • doodirock

      this has nothing to do with Bootstrap and can be fixed with fast click https://github.com/ftlabs/fastclick

      • Alon Amir

        Correct theoretically, practically however – not really.

        FastClick.js breaks functionality of various bootstrap “elements” such as dropdowns, see https://github.com/ftlabs/fastclick/issues/48, it had to be fixed *inside* of bootstrap to make FastClick.js integrate as it should.

        And then there’s still the issue of the “:hover stuck state”.

        Keep in mind, when using Polymer for example, it provides a convenience event “on-tap” that works great with both touch capable browsers and desktop browsers, again, try to use FastClick.js and it will break stuff, suddenly buttons are not tappable, inputs won’t focus, etc.

        IMHO a great UI framework/library nowadays should independently handle such a mandatory requirement and use case, providing a simplified event that handles both clicks & taps responsively.

  • shashi

    great

  • shashi

    whts the new in bootstrap4

  • http://soeb.me/ Soeb Safi

    Still the question remains? When are we going to get it in our kit?

  • Alan Spencer

    What’s the rationale for chaning @media queries from px to em? Screen sizes are measured in px and the old browser bug when zooming in has been long fixed: https://bugs.webkit.org/show_bug.cgi?id=53186

  • Dominick Burman

    IE8 support dropped.. hmm I have a client that is still on IE7

    • Yousuf Ameer

      i suppose your client still living in a stone age era

    • Hall of Famer

      Then you should tell the client to upgrade to at least IE9, or even better, not to use IE at all. Its your client’s problem, not bootstrap’s.

    • WiseFundManager

      IE7? Are you kidding me? You better tell that client to stop using Windows XP and come back to 2016.

  • Erwin Vomberg

    so you dont know nothing and take abunch of wild guesses. why did you write the article? 🙁

  • http://ssbcrack.com Marathe Dinesh

    I love bootstrap and its very user friendly

  • http://ssbcrack.com Marathe Dinesh

    still release date is Suspense……………..

  • Timothy Gandionco

    Wish we can fix tabs at the top of screen, like nav headers. Also, I wish material design has already been incorporated into it.

  • http://nodets.org Μάκης Μαρόπουλος

    Most of the features and ideas (also the new design for showcase page) came from Semantic-UI Framework. Hope the bests to the bootstrap’s contributors. Happy new year!

  • WiseFundManager

    When are these idiots going to release this? Innovation doesn’t wait!

All Blog Posts

Say Hello_

If you have a question, I'll answer