Bootstrap 4

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Now Bootstrap has going to release the next version 4 in 2016. Right now, since we’re only in Alpha, to get started with Bootstrap 4 you need to head over to the v4-dev branch and choose the way you want to start messing with it.

Here are the top feature are included in bootstrap version4.

1. Completely Redesigned Navbar

Probably the hardest and most discouraging things about using Bootstrap 3 is the navbar. It’s tough to figure out. It means there are so many class names to make it. Adding image as your logo is impossible. They tried to add this in Bootstrap 3.3, but it’s too little too late.
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?
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.

2. Brand New Documentation

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

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

3. 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.
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-*.

4. A new approach to global theming

This is most interesting in Bootstrap. 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)

We have to learn to trust the Twitter Bootstrap. Like we stated earlier, they are popular for good reason. We are 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”

Bootstrap has never been very animation rich. It means, 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.