The front-end web framework Bootstrap is a highly successful open source project. After two years in alpha, the first beta of Bootstrap 4 has been released.

Originally Twitter Blueprint, Bootstrap was developed at Twitter by Mark Otto and Jacob Thornton as a framework to encourage consistency across internal tools. It was renamed at the time of its first release in August 2011, when it became an open source project. Its subsequent development has attracted a large community of contributors but has been largely done by the original small group of core developers.

Since version 2.0 which was released in early 2012, Bootstrap supports responsive web design, which means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone). Responsive design has been the default since the release of version 3.0 in August 2013 when Bootstrap adopted its mobile-first design philosophy.

Mark Otto first announced version 4 when Bootstrap 3.3.0 was released at the end of October 2014, saying that the first alpha would be "a couple weeks off". In fact it was August 19, 2015 - Bootstrap's 4th birthday, before it shipped.

The roadmap outline then was:

• A few alpha releases while things are still in flux.
• Two beta releases after features and functionality are locked down to really test things out.
• Two release candidates (RCs) to really test things out closer to production environments.
• Then, the final release!

In fact there have been six alpha versions, the latest of them in January 2017, but considering the scope of the changes and improvements this isn't really surprising. 

In the announcement of the Beta on the the Bootstrap Blog Mark Otto notes:

Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we've broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted.

Probably the most significant feature of version 4.0 is the adoption of Sass (syntactically awesome stylesheets) in place of Less as its style sheet language. According to Otto:

Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.

The other major change is the adoption of flexbox. In the Alpha 6 announcement, Otto writes:

Flexbox is an immensely powerful layout tool, providing unparalleled flexibility (hah) and control to our grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.

Flexbox brings the following advantages to Bootstrap 4:

• Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
• Equal height and equal width cards
• Vertical and horizontal centering without hardcoding values with translateor margin
• Utility classes for easily (and responsively!) changing display, direction, alignment, and more
• Auto margins for easy spacing
• Justified navigation and button groups
• No more HTML white space or broken table-style rendering

In addition a new grid tier has been added to better target mobile devices, and there is a a new component - cards:

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards replace Bootstrap 3's panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Other notable changes are:

• Forked Normalize.css and consolidated all HTML resets into a new CSS module, Reboot. Normalize.css has dropped some core CSS tweaks Bootstrap has 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, they have been move into Sass variables. When you want to customize, simply update a variable and recompile.
  
  
• Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements with new teardown methods, option type checking, new methods, and more.
  
  
• Improved auto-placement of tooltips, popovers, and dropdowns thanks to the help of a library called Popper.js.
  
  
• New build tools completely rewritten in npm scripts instead of Grunt, simplifying the process of developing and contributing to Bootstrap.

Newer CSS support with responsive typography and easier component sizing has involved moving to rem units rather than pixels, This means dropping support for IE8, IE9, Safari 8-, iOS 8-. You'll have to stick with Bootstrap 3 if you need to support older browsers.

Finally, Bootstrap's documentation has been redesigned and rewritten in Markdown with the addition of some plugins to streamline examples and code snippets. There's also a new search form. 

More Information

Announcement of Bootstrap 4 Beta

Download Bootstrap v4.0.0-beta

Documentation

Migrating to v4

Related Articles

GitHub Octoverse Reveals The State Of Open Source

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info