Say Ola! to Bootstrap 4

So it’s now a being 4 years to see Bootstrap in market and now Bootstrap already launch 4th version, so many sites already migrate to bootstrap 4 from 3 and some people still in middle to take a call to wait for some time or go for bootstrap 4.

So let’s see what is new we get in Bootstrap 4 and how its help us

    1. Goodbye Less, Hello SassBootstrap 4 is now on Sass and that’s why bootstrap will complies faster than ever thanks to Libsass. So now we will be having change in directory hierarchy
      Bootstrap 3
      Bootstrap3
      Bootstrap 4

      Bootstrap4
      I know you notice that font folder is missing in Bootstrap 4. Yes, font folder is not missing in Bootstrap 4 it’s got eliminated because bootstrap 4 will no longer support glyphicons anymore.
    2. Better Grid System based on “rems”
      Bootstrap grid still follows the same HTML syntax, but the underling architecture changed quite a bit. However bootstrap 4 classes used ems not pixels and they’ve added one new tier for extra large screens.

      • col-xsfor extra small display (screen width less than 34em)
      • col-smfor smaller display (screen width 34em and up)
      • col-mdfor medium display (screen width 48em and up)
      • col-lgfor larger display (screen width 62em and up)
      • col-xlfor extra large display (screen width 75em and up)

      The container has max-width set in rems. A row now has a negative left and right margin of -.9375rem while columns have default left and right padding of 0.9375rem. This value were previously 15px in Bootsrap 3.

      So this might be a good thing to support all screen sizes, it may take time for some web designers and developers to get used to it as most of the graphics tools that are being used today like Photoshop, fireworks etc. used pixel on its design.

      If you are using the Sass CSS source version of bootstrap 4, you can control the grid size by changing the following variables:

      • $grid-columns:number of grids horizontally (12 default)
      • $grid-gutter-width:total padding around each grid (30px default)
      • $grid-float-breakpoint:minimum size the navbar becomes uncollapsed ($screen-sm-min default)
      • $grid-float-breakpoint-max:maximum size where the navbar begins collapsing (the default would be the size of the $grid-float-breakpoint – 1)
    3. Typography
      Bootstrap typography is using rems. Unlike px and em, it is not a fixed or relative unit that is direct or nearest to its parent measurement. The rem unit is dynamic and relative to the root HTML tag. However, you can still use px, em and pt on Bootstrap projects if you want.To give you an idea how rems work, you can divide the target to base size of html in pixels.
      Let’s say we have the following code
      html{
      font-size: 16px;
      }
      p{
      font-size: 1rem; /* 1rem = 16px */
      }
      h1 {
      font-size: 1.875rem; /* 30px / 16px = 1.875rem */
      }
      In the example above, we set out paragraph tag into 1 rem which is equivalent to 16px as our html root size. While h1 tag will have 1.875rem if you will divide the target size which is 30px to the html root size of 16px.Bootstrap 4 pulled rems units into scene to have 100% perfect scaling of the entire application. This makes it easier to scale up or down for devices. It also worth noting that size of the html tag can be customized to your preferred size.
    4. Improved media query
      I still remember when I teach media query to my team they told that it’s really frustrated to know the size of device and define in media query.In bootstrap 3 we write media query something like this
      /* Extra small devices (phones, less than 768px) */
      /* No media query since this is the default in Bootstrap */
      /* Small devices (tablets, 768px and up) */

      @media (min-width: @screen-sm-min) { ... }
      /* Medium devices (desktops, 992px and up) */
      @media (min-width: @screen-md-min) { ... }
      /*Large devices (large desktops, 1200px and up) */
      @media (min-width: @screen-lg-min) { ... }
      So now in bootstrap 4 grid system has been completely revamped with em based values, we need to change them as such:
      // Extra small devices (portrait phones, less than ???px)
      // No media query since this is the default in Bootstrap
      // Small devices (landscape phones, 34em and up)
      @media (min-width: 34em) { ... }
      // Medium devices (tablets, 48em and up)
      @media (min-width: 48em) { ... }
      // Large devices (desktops, 62em and up)
      @media (min-width: 62em) { ... }
      // Extra large devices (large desktops, 75em and up)
      @media (min-width: 75em) { ... }
    5. Cards
      In Bootstrap 4, panels, thumbnails and wells were removed and replaced with cards. This component can be used to display information as a page or a container which supports different kinds of content such as links, text, images, headers, footers and many more with a variety of background colors.To enable cards, add the .card and .card-block classes to an element. There are also some more classes that you can use inside the .card class.

      • .card-title for heading title
      • .card-text for the text element
      • .card-header for the header
      • .card-footer for the footer
    6. Tooltips
      The Bootstrap tooltip plugin was originally based on the jQuery.tipsy plugin written by Jason Frame. However, in Bootstrap 4, it move to Tether, a third party plugin. If you want to use this new feature include tether.js just before the bootstrap.js.
    7. No more IE8 Support
      IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.
      It’s currently unclear if there will be a partial support with a HTML5 shiv and respond.js or not. It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3.

Now safe to use JQuery 2.0!
Now that Internet Explorer 8 support is dropped. It’s safe to always use jQuery 2.0 with Bootstrap. jQuery 2.0 is smaller, faster, and has more features.

Smaller then Bootstrap 3
Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build! It previously was around ~123kb and now is a mere ~88kb. This is a huge reduction for not losing any features.

My verdict on Bootstrap 4
Even though bootstrap 4 is only in alpha, it is still really exciting and safe to use. Bootstrap has come a long way. It is advised to always check the official documentation and for the future updates.