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."

Mark Otto, Bootstrap founder

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

Share that happy news!