Bootstrap 4 Introduction – What’s New

Published on: May 8, 2016 10:27 am  /   Published by:   /   Comments:

“Bootstrap” is a well-known and most essential platform to the web designers. Currently, the latest version of Bootstrap is v3.3.6. The Bootstrap project has stepped into their fourth birthday on 19th August 2015 and on the same day they have announced the upcoming version of Bootstrap 4. Currently, it’s in alpha stage and the source code is available in a GIT branch for forks. The final release date of Bootstrap 4 has not been declared yet. But there is a predeclared development plan of having a few “alpha” releases, then two “beta” and two “RCs” (release candidates), and then the final version will be released. They have also announced that, unlike withdrawing the further support for v2.x after the release of v3.0, which was a mistake, they will continue the support for v3.x after the release of Bootstrap 4.

There are major changes that have been made in Bootstrap 4 and it is a rewrite of almost the entire project. Very old browser support has been dropped, moved from LESS to SCSS, switched from px unit system to em unit system, some components have been dropped, and some new components have been added. Let’s see what are the changes and new features in Bootstrap 4.

Before you can check what are the new changes in the latest version, you need to get the source code into your system. Here’s a way below to do that.

# Clone the repository
git clone https://github.com/twbs/bootstrap
# Navigate to the directory
cd bootstrap
# Fetch all the remote branches
git fetch
# Switch to the version 4 development branch
git checkout v4-dev

After cloning the repository, you need to compile the SASS files and in order to do that, you need to use the gruntfile within the package. Node.js and Grunt.

npm install
npm install -g grunt-cli
grunt watch

Here’re the available CDN versions below.

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>

Bootstrap 4 – What’s New

  • Moved from Less to Sass. Bootstrap 4 now compiles faster than ever.
  • Improved grid system. Added a new grid tier to better target mobile devices and completely overhauled the semantic mixins.
  • Opt-in flexbox support. Switch a boolean variable and recompile the CSS to take advantage of a flexbox-based grid system and components.
  • Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap 4, but they’ll feel familiar as they do nearly everything wells, thumbnails, and panels did.
  • Consolidated all the HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.
  • Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
  • Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
  • Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
  • Improved auto-placement of tooltips and popovers with the help of a library called Tether.
  • Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on its way.

And lots more! Custom form controls, margin and padding classes, new utility classes, and more have also been included.

Here is a getting started guide for the early learners of the new bootstrap version.

Along with the Bootstrap 4 alpha release, the team has launched another side project of Official Bootstrap Themes which is a great addition to this platform.