Bootstrap is a well-known and essential platform for web developers and front-end developers. 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 the alpha stage and the source code is available in a GIT branch for forks. They have not declared the final release date of Bootstrap 4 yet. However, 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.
Importantly, they have also announced that, unlike withdrawing 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.
Update 12th May 2020:
The team has released the latest stable version Bootstrap 4 (v4.5.0) today.
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 the px unit system to the em based 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.
Bootstrap 4 – Installation
Firstly, before you can check what are the new changes in the latest version, you need to get the source code from GIT into your system. Here’s a way below to do that.
#1 Clone the repositorygit clone https://github.com/twbs/bootstrap
#2 Navigate to the directorycd bootstrap
#3 Fetch all the remote branchesgit fetch
#4 Switch to the version 4 development branchgit checkout v4-dev
Subsequently, 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
Update 12th May 2020:
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>
Update 12th May 2020:
Bootstrap 4 – What’s New
Moved from Less to Sass.
Therefore, 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 flex box 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.
To clarify, 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, they’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.
The team has dropped support for IE8. It 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 the JavaScript plugins.
The Bootstrap team has rewritten every plugin in ES6 to take advantage of the most recent JavaScript enhancements. Most importantly, 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.
They rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with the docs way easier. In addition, an improved search is also on its way.
Get started!
And lots more! For instance, custom form controls, margin and padding classes, new utility classes, and more have also been included.
If you are an early learner, here is the guide of the new bootstrap version for you.
Subsequently, 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.