Bootstrap 4 alpha 6

Bootstrap 4 is a major rewrite of almost the entire project. So, you must be wondering what’s new and what’s been removed? Biggest change you’ll notice in Alpha 6: Grid system and several components are now built with flexbox to start instead of having opt-in behavior via $enable-flex.

Dropped IE9, went full flexbox, updated navbar, more grid features, better utilities, and more. With the lack of flexbox support in IE9, users have no problem in dropping IE9 support for v4 beta. Bootstrap has rewritten grid system and Flexbox is enabled by default. In general this means a move away from floats and more across Bootstrap’s components. Dropped IE8, IE9, and iOS 6 support. For sites needing either of those, use v3.

EMBRACING FLEXBOX

Flexbox becomes the default layout option for Bootstrap 4. Sass variable $enable-flex has been removed, Sass files cleaned up, docs consolidated, and migration and browser support notes updated. Beyond the flexbox changes, there are no additional changes to the compiled CSS at this time.

• Removed the $enable-flex variable: Flexbox is now enabled by default and cannot be disabled via Sass variable.
• Removed the non-flexbox variants from grid system, cards, media objects, list groups, and navigation components.
• For the grid, there should be no breaking changes to your code. You can, however, take advantage of the flexbox auto layout and alignment options though!
• For cards, this means you can now drop .card-deck-wrapper from your markup.
• For media objects, this means you can be more flexible with the order of your markup
• For list groups, this simplifies the alignment of badges. No more required utilities just to vertically and horizontally align badges in list group items. (You might still need some for fine-tuning, though).
• Even more complex components like the carousel have been modified to use flexbox in some places.
• Consolidated grid docs to a single grid.md file (no more flexbox-grid.md.)
• Updated migration and browser support docs to clarify IE10+ support.
• Removed flexbox.md docs from the Getting started section.

Because of these changes, here’s what’s been modified in the compiled CSS:

• Clearfix has been removed from rows as it’s no longer necessary with no floats being present.
• Columns use max-width instead of width. While this was the case for the flexbox grid before this change, it’s different from the default grid’s use of width.

GRID SYSTEM UPDATES

• As part of flexbox, included support for vertical and horizontal alignment classes.
• Responsive autosizing columns and container padding options are added.
• Add any number of .col-* classes and they’ll automatically be equal in width.
• 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.

UPDATED NAVBAR

As mentioned in our last article BOOTSTRAP 4 ALPHA 5, the Alpha 5 navbar was a little half baked. This time around, its completely baked. No, but seriously, the navbar has been rewritten to provide better built-in responsive behavior and improved layout customisation thanks to the move to flexbox. Here’s the rundown on what’s changed:

• Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
• Navbar navs no longer require the .nav base class. Now it’s just .navbar-nav and utilities for alignment.
• The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within.
• The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customisation.

Looking for someone who can develop a website or mobile app for you with the latest Bootstrap Alpha 6, checkout our PSD to HTML service. Feel free to contact us, we will develop your website for you so that you can focus on things that you love doing most and enjoy being your own boss.