Bootstrap 4 (Beta) Pros & Cons


Bootstrap is HTML, CSS and JS responsive framework. Now here comes the bootstrap 4 with beta version. It has been updated a lot than Bootstrap version 3. Anything that gets updated have both pros and cons.


  1. Pros
  2. Cons


  • Bootstrap 4 is using flexbox which will increase the flexibility to arrange the elements. It has been moved away from float.
  • It has been switched from using “px” to “rem”.
  • It has been switched from “less” to “sass”.
  • It has added dozens of new utility classes for common CSS property-value pairs.
    For Example:

    1. To apply rounded border to any element you need to simply add “rounded-circle” class to it.
    2. To vertically center align the element you need to add “align-middle” class.
  • It has revised grid system media queries breakpoints and ensured that the columns are divided into 12.
    // Extra small devices (portrait phones, less than 576px)
    // No media query since this is the default in Bootstrap// Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { … }// Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { … }// Large devices (desktops, 992px and up)
    @media (min-width: 992px) { … }// Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { … }
  • As it is supporting flexbox, it provides support for horizontal and vertical alignment.
  • Box-sizing value has been changed from “content-box” to “border-box”.


  • It will be difficult for those who are not so adaptable to accept that bootstrap has changed the classes and media query breakpoint.
  • It does not provide support to non responsive usage.
  • It also does not support IE8, IE9 and iOS 6
  • Removed -xs infix. It mean that “col-xs-6” in version 3 becomes “col-6” in version 4.
  • Dropped the online customiser

Priya Patel Web Designer

I am a Web Designer at Yudiz Solutions Pvt. Ltd - a leading Web and Mobile Apps development company. In my free time I learn new things about latest web design tools and techniques.

Comments are closed.