We <3 What's New in Bootstrap 4

We’ve been knee-deep in a few custom coding projects here at DBS, using the latest and greatest framework iteration from Bootstrap (4) which finally saw its beta release August 10th of this year, after 2 years in Alpha.

Our Favorite Changes

Bootstrap is a major coding framework that makes responsive coding a snap (to grid). Here are some of the major features we love most about version 4, and why they matter.

  1. They moved from LESS to SCSS
    CSS preprocessors like LESS and SCSS save time in building and maintaining DRY (Don’t Repeat Yourself) code. Bootstrap was originally written in LESS, but ultimately SCSS is a better option for front-end developers.
  2. Move to 5 screen size tiers
    Much of the joy that Bootstrap brings is its efficient handling of responsive coding. But as devices evolve (hello, 4K displays), this job gets bigger and bigger. And smaller and smaller. Bootstrap 4 now accommodates 5 size tiers: (xs, sm, md, lg, and xl), adding a ~480px tier, so other size tiers are free to expand.
  3. Flex Box Default
    With this latest version, you have the option to set Flex Box to be the default float behavior. Positioning is always a bit of an art form, but flexbox default makes that a much more intuitive process. Using flexbox gives developers much greater control over how elements within a container behave. Designers, rejoice.
  4. New Utility Classes
    Just need to add a little margin or padding? Want a border? Need to change the default flexbox behavior to another type of display? These fun little utility classes are by far our favorite piece. Rather than writing out lines and lines of CSS to help shape and form everything, a few quick classes on the element get the basics in place – leaving the fine-tuning as the majority of the CSS we write.
  5. Smart Variables
    Bootstrap uses variables (dynamic elements) & mixins (code snippets) to help keep code clean, DRY, and easy to maintain. Bootstrap has a lot of on/off variable options, where you can enable or disable sections new features depending on what you need to support. However, they’ve also made media queries a mixin, making it much easier to adjust the standard sizes.
  6. Cards!
    Cards offer basic setup for common web elements (service boxes, pricing boxes, accordions, panels) easy to set up, but also easy to customize. With many different element types consolidated into cards, these are more accessible to implement and maintain.
  7. What’s NOT there
    Pruning support for outdated or unused technologies simplifies the entire framework and makes it easier to support. With Bootstrap 4, outdated browsers like IE8 and IE9 are no longer supported, thus freeing the framework up to use more modern code features. Also, bye Glyphicon. Everyone uses Font Awesome, anyway.

Why do you love what’s new in Bootstrap 4? We’d love to hear your take, so leave your opinions in the comments below!