bootstrap-v4-2017-May

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. Bootstrap 4 has been a massive undertaking that touches nearly every line of code.

You wonder What’s new ?

There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:

Moved from Less to Sass.

Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers. Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins. Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.

Dropped wells,

..thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better. Consolidated all our 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, 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.

Dropped IE8 support

..and moved to rem and em units. Dropping support for IE8 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 our JavaScript plugins.

Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more. Improved auto-placement of tooltips and popovers thanks to the help of a library called Tether. Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on its way.

And tons more!

..Custom form controls, margin and padding classes, new utility classes, and more have also been included. And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Plus, we’re not even done yet!

Ready to check it out? Then head to the v4 alpha docs!

Alpha 6 has landed, and it’s one of our biggest ships to date. We’ve rewritten our grid system and all major components in flexbox, forging ahead with it as our default layout option as we drop IE9 support. With 700 commits since our last release, we have some catching up to do.

Read one for highlights from this release. We also recommend reviewing the ship list and milestone for a more detailed look at what’s changed.

Embracing Flexbox

Bootstrap 4 is now flexbox by default! 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.

JS Bin on jsbin.com

If you’re unfamiliar with flexbox, here’s some of the power you can expect to utilize in 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 translate or 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

Nearly every component now takes advantage of flexbox in place of display: table hacks and floats. That means less reliance on clearfix, more control over DOM and visual order, and fewer bugs. Navs, list groups, cards, and more all utilize flexbox. Even more complex components like the carousel have been modified to use flexbox in some places.

JS Bin on jsbin.com

Responsive utilities and the great infix

With Alpha 6, we’ve made Bootstrap’s extensive suite of utilities—including classes for display, float, and flexbox, and more—completely responsive. To keep these class names as approachable and representative of their scope as possible, we’ve also made two important changes to their naming scheme.

  • First, we’ve dropped the -xs infix from our lowest (extra small) breakpoint. xs isn’t a responsive breakpoint quite like sm, md, lg, and xl because it doesn’t start applying styles at a min-width and up. It simply applies to everything as there’s no bounding @media query.

  • Second, we’ve renamed several classes to better articulate their property-value pairings. Instead of pull, we use float. Instead of creating new names for the various flexbox properties, we start with the property name.

Put that all together and you end up with updated classes like .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. These new classes bring immense power and customization to folks building with Bootstrap. They also make it easier for those migrating from v3 with clearer mappings to legacy class names.

More grid improvements

We’re back at it with more grid improvements. This time we’ve added responsive autosizing columns and more container padding options. Add any number of .col-* classes and they’ll automatically be equal in width.

JS Bin on jsbin.com

Padding for grid containers can now be configured across breakpoints with the new $grid-gutter-widths Sass map. In addition, you can remove gutters from grid rows and their columns with the .no-gutters modifier

Up next, first beta

Like you, we’re very much ready for first beta release. Luckily, we’re in great shape to get there from this alpha. We have the fewest open issues and pulls we’ve had in easily the last 18 months, and the contributions from the community have been outstanding.

Using the Bootstrap CDN? Review the changelog and update your CDN links to point to the latest files:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Author : Marino Glažar, Developer

Related tags: bootstrap v4, HTML, CSS, Custom, Responsive