Bootstrap 4 Stable release
Summary and tutorial
It took almost 2,5 years to develop Bootstrap 4. But it's finally here!
6,000+ commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted.
We truly love it. We are sure that you will love it as well.
Bootstrap 4 tutorial Download Material Design for Bootstrap 4 Download pure Bootstrap 4
"It's literally taken us years to do it, but Bootstrap 4 has finally arrived! Words cannot begin to describe the elation the entire team and I have for this release, but I'll do my best. Thank you to everyone, especially to the team, and to everyone who’s contributed code in a pull request or opened an issue. Thank you."
The most important changes
Dropped IE8, IE9, and iOS 6 support
Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+.
Flexbox by default
Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility and control to Bootstrap grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.
Switched from Less to Sass
Bootstrap now compiles faster than ever thanks to SASS. It also became much more intuitive and flexible.
Switched from
px to
rem
Now everything in Bootstrap 4 is dynamic and relative to the root
html element. That is extremely useful thing which makes easier for mobile devices to scale up or down.
Enhanced grid system
The new grid is now powered by flexbox and
rem units, which make it extremly powerful and flexible tool.
Don't be afraid, it won't be difficult to learn. Follow our tutorial and you will fall in love with the new Bootstrap grid.
New components
Dropped panels, thumbnails, and wells for a new all-encompassing component - cards.
Font Awesome instead of Glyphicons
Improved forms, buttons, dropdowns, navbars, modals, tables, pagination, tooltips, carousel and many more.
Enhanced documentation
Huge, detailed user-friendly documentation will help you implement your ideas fast and easily.
ES6
Each plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements.
They also with UMD support, generic teardown methods, option type checking, and tons more. This means that maintaining the plugins will be a lot easier and their development much faster.
Improved utilities
Helpers included in Bootstrap 4 will solve a lot of annoying issues, so common in daily work of each developer. It will definitely make our life easier.
Droped Normalize.css
Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended
upon. Reboot takes the core of Normalize.css and expands it to include 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, grid classes, 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.
New build tools
Completely rewritten in npm scripts instead of Grunt, immensely simplifying the process of developing and contributing to Bootstrap.
Frequently asked questions
Click on the question below to expand
According to Bootstrap Team - yes, it is safe and recommended.
It seems that all the most significant changes have been already applied.
Bootstrap 4 is lighter and easier. And thanks to improvements such like flexbox, it's more powerful than even before.
The future definitely belongs to Bootstrap 4. That's why my answer is: Bootstrap 4 is better than Bootstrap 3.
The fact worth of noticing: Bootstrap team announced they stop developing Bootstrap 3 and focus entirely on Bootstrap 4.
Oh, that question is easy. You definitely should learn Bootstrap 4 and flexbox, because this it the future.
If you ask, why not to learn Bootstrap 3 if it's still in use, consider that:
Bootstrap team announced they stop development of Bootstrap 3 and focus entirely on Bootstrap 4.
It will be maintained although not developed. The situation will be probably similar to Bootstrap 3 and 2:
- some old, huge and hard to migrate projects will keep Bootstrap 3 but the vast majority od developers will switch to Bootstrap 4.
And finaly, as it happened to Bootstrap 2, Bootstrap 3 finally will be forgotten.
It will be maintained although not developed. The situation will be probably similar to Bootstrap 3 and 2:
- some old, huge and hard to migrate projects will keep Bootstrap 3 but the vast majority of developers will switch to Bootstrap 4.
And similarly to Bootstrap 2, Bootstrap 3 finally will be forgotten.
The fact worth of noticing: Bootstrap team announced they stop developing Bootstrap 3 and focus entirely on Bootstrap 4.
Ok, let's clarify - flexbox isn't a wonderful remedy for all aches and pains of web development problems (like it sometimes seems to be).
Nevertheless - it's really great and useful tool that allows elements to align and distribute space within a container.
It's definitely something worth of learning and using.
Learn more about Bootstrap 4
Bootstrap 4 tutorial
The complete and easy guide will teach you how to create stunning, responsive website and apps. Each lesson is provided with series of practical examples and each of those examples brings an essential web design knowledge.
Start
Material Design for Bootstrap 4
400+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and many more.
Available jQuery, Angular, React and Vue versions.
Free download