What's new in Bootstrap 4 ?

Łukasz Holeczek Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Tuesday, July 4, 2017

Bootstrap 4 is just round the corner. Bootstrap 4 is a major rewrite of the entire project. Here is list of major changes in latest version of Bootstrap.

Browser support

• Bootstrap 4 doesn’t support IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+.
• Official support for Android v5.0 Lollipop’s Browser and WebView.

Global changes

• Flexbox is enabled by default. In general this means a move away from floats and more across our components.
• Switched from Less to Sass for source CSS files.
• Switched from px to rem
• Global font-size increased from 14px to 16px.
• Revamped grid tiers to add a fifth option (addressing smaller devices at 576px and below) and removed the -xs infix from those classes. Example: .col-6.col-sm-4.col-md-3.
• Replaced the separate optional theme with configurable options via SCSS variables (e.g., $enable-gradients: true).
• Bootstrap 4 doesn’t support non-responsive websites.
• Bunch of new utility classes for common CSS property-value pairs and margin/padding spacing shortcuts.

Grid system

• Moved to flexbox. Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility and control to our grid system and core components.
• Added support for flexbox in the grid mixins and predefined classes.
• As part of flexbox, included support for vertical and horizontal alignment classes.
• Updated grid class names and a new grid tier.
• Added a new sm grid tier below 768px for more granular control. In latest version of bootstrap you can use xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4).
• xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).
• Updated grid sizes, mixins, and variables.
• Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.
• Updated grid mixins to utilize a make-col-ready prep mixin and a make-col to set the flex and max-width for individual column sizing.
• Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by 12 at their max width.
• Grid breakpoints and container widths are now handled via Sass maps ($grid-breakpoints and $container-max-widths) instead of a handful of separate variables. These replace the @screen-* variables entirely and allow you to fully customize the grid tiers.
• Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have @include media-breakpoint-up/down/only. Now, instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.

Components

• Dropped following components:
• Panels
• Thumbnails
• Wells
• Instead of them you can use all-encompassing component Cards
• Dropped the Glyphicons icon font. But no worries our bootstrap admin templates are delivered with some great icon sets:
  • Glyphicons PRO
  • Font Awesome
  • Simple Line Icons
• Dropped the pager component.
• Refactored nearly all components to use more un-nested class selectors instead of over-specific children selectors.
• Updated navbar. The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
• Responsive navbar behaviors are now applied to the .navbar class via the required .navbar-expand-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
• .navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color.
• Navbars now require a background declaration of some kind. Choose from our background utilities (.bg-*) or set your own with the light/inverse classes above for mad customization.
• Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
• .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
• Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
• Navbars no longer include margin-bottom or border-radius by default. Use utilities as necessary.
• All examples featuring navbars have been updated to include new markup.

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.