Overview
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.
Pros:
- 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:- To apply rounded border to any element you need to simply add “rounded-circle” class to it.
- 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”.
Cons:
- 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