Published on <a href="https://blog.prototypr.io/what-you-need-to-know-about-the-latest-bootstrap-4-beta-bc750ef2b9ae?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Piotr Bender <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7w6m35QgUuYxev8cMl7RwQ.png">
It’s here. And it’s great.
After almost two years of development, Mark Otto and Jacob Thornton released a stable Bootstrap 4 beta — long awaited successor to the throne of responsive design.
And I’m about to tell you everything about it.
<h3>“But why should I care?”</h3>
<ol>
<li>Bootstrap is huge.</li>
</ol>
As for today, Bootstrap is present in around 3.5% of the entire internet (based on <a href="https://trends.builtwith.com/docinfo/Twitter-Bootstrap">this data</a>).
<img alt="" src="https://cdn-images-1.medium.com/max/250/1*xtz2pJqdTJrbeGh54g60kw.png">Bootstrap coverage data from BuiltWith Trends
That’s 1.5% percentage points growth since the last year and it doesn’t seem to slow down.
Still not convinced?
2. Bootstrap 3 will be gone really soon.
If you are familiar with the project’s story, you remember what happened to BS2 after V3 release. It almost instantly disappeared from the web.
And it’s about to come full circle.
<img alt="" src="https://cdn-images-1.medium.com/max/542/1*8ZFVXjnhojunatoDyhzRMg.png">“Bootstrap3&#8243; search term popularity in Google Trends
With the inundation of websites following the same or similar design patterns, developers are simply getting bored with it.
There’s not much time left for Bootstrap 3 before people leave it for good, especially knowing that the team already dropped its development.
<img alt="" src="https://cdn-images-1.medium.com/max/779/1*ECIlrJ3SnIzbn4AsE3rFtw.png">Roadmap to Bootstrap 4
3. Bootstrap 4 is about to really step up the game.
The community behind the Bootstrap framework was always something to look up to.
With an open Slack channel, active GitHub page, and a direct users-creators communication, the team listened to what the people want.
That resulted in thought-out changes and improvements that killed all the major nuisances.
The much-appreciated grid system still lets you escape the CSS positioning hell, and now it’s getting better with FlexBox (which I’m about to introduce in a minute)!
<h3>Global and important changes to Bootstrap 4</h3>
Few points that you really need to know about the beta:
<ul>
<li>Dropped IE8, IE9, and iOS 6 support — IE10+ and iOS 7+ from now on.</li>
<li>Uses Flexbox — immensely powerful layout tool as default.</li>
<li>Switched from Less to SASS — compiles in a faster, more intuitive and flexible way.</li>
<li>Switched from px to rem as primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.</li>
<li>ES6 — each plugin has been rewritten to take advantage of the newest JavaScript enhancements.</li>
<li>New components — Cards, Font Awesome and visual improvements to all the others.</li>
<li>Enhanced project documentation.</li>
<li>Replaced the separate optional theme with configurable options via SCSS variables.</li>
<li>Added a new grid tier for smaller devices at 576px and below.</li>
<li>Improved utilities</li>
</ul>
All that adds up to a quite a number of improvements, that will change the way you build with Bootstrap.
<h3>What’s Flexbox?</h3>
Flexible Box Layout Model (called Flexbox) serves as a layout mode and solution for managing page’s responsiveness.
When the page layout accommodates different screen sizes, using Flexbox makes elements behave predictably.
It will cut the time you need to get those object aligned in a way you want, on any resolution.
Here are some basic usage examples along with a brief explenation to put more light on it:
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fmdbootstrap%2Fembed%2Fpreview%2FdRWyeR%3Fheight%3D600%26slug-hash%3DdRWyeR%26default-tabs%3Dhtml%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2Fmdbootstrap%2Fpen%2FdRWyeR%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F784632.dRWyeR.small.0bbaafd6-a769-4988-9b11-ddf9ae698064.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/fc31678ac1323c37ee462821c74a8e6d/href">https://medium.com/media/fc31678ac1323c37ee462821c74a8e6d/href</a></iframe>
See the CodePen <a href="https://codepen.io/mdbootstrap/pen/9e0f12c555e76ee0b5e229ce4a3f0e62">here</a>.
And if you feel like learning something more about Flexbox, here’s an in-depth <a href="https://mdbootstrap.com/flexbox-tutorial/">tutorial</a>.
<h3>What about the final version of Bootstrap 4?</h3>
According to the announcement of Bootstrap team, we should expect one or two more Beta releases before the final version.
It’s hard to tell the exact date but it should take around a few months from now.
<h3>Is that all?</h3>
Not even close.
The list goes on. Mark and Jacob did a solid piece of work here, and we should all be grateful for that.
Here’s a more <a href="https://mdbootstrap.com/bootstrap-4-beta/">detailed change list</a> with notes to each single component and general notes on how to prepare for Bootstrap 4.
You might also want to <a href="https://mdbootstrap.com/inspirations/">browse through some projects</a> that are already based on the Beta.
If you find this information helpful, leave a 💚 so that more people can learn!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bc750ef2b9ae" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/what-you-need-to-know-about-the-latest-bootstrap-4-beta-bc750ef2b9ae">What You Need To Know About The Latest Bootstrap 4 Beta</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

What You Need To Know About The Latest Bootstrap 4 Beta

Top Stories