Introduction to Bootstrap 4 and what is new in it
Bootstrap 4 final stable version was released on January 18th, 2018. There are lots of new changes in this version.
1) FlexBox Support:- Earlier Bootstrap’s layout was powered by float-based styles. The recent version of bootstrap supports flexbox. Flexbox allows more flexibility than floats. It can be used in order to scale elements or apply advanced alignment capabilities – horizontal as well as vertical. It is used for easy reordering of content across devices and screen resolutions with the help of media queries. The Flexible Box Layout Module makes it easier to design flexible, responsive layout structure without using float or positioning. Flexbox is now the master of bootstrap grid and supports most of the browsers. One big advantage with flexbox is that grid columns without a specified width will automatically apply equal width columns and equal height.
2) Support SASS instead of LESS:- Bootstrap now uses Sass. In the older version it uses Less as its main preprocessor. Sass support more features and abilities than any other CSS extension language.
3)Improved Grid System:- Bootstrap 4 grid system has five classes:
.col- (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)
Previously, there were 4 grid systems to the Bootstrap 3. The newly added prefix is .col-xl- that accommodates 1200px or bigger screens. Bootstrap 4 has removed the xs from the lowest break point. Therefore, col-*covers all devices (no need to specify the size in this case).
Some Bootstrap 4 grid system rules which need to BE followed:
1) We need to place rows within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
2) Columns (col-sm, md.. classes) may be needed for immediate children of rows or we need to use rows to create horizontal groups of columns.
3) Column widths are in percentage, so they are always fluid and sized relative to their parent element.
4) Panels, wells replaced by Cards:- Bootstrap 4 introduced a new component called cards. It’s expandable and is the container for content with several flexible options. Cards are bordered boxes with a bit of padding around the content inside them, which can be used to conveniently display a specific set of information. The .panel, thumbnail, and .well classes have been replaced by .card in Bootstrap 4. Modifier classes for cards offer similar functionality to those components.
5) Drops The Support for IE8 and IE9:- Bootstrap 4 Dropped IE8, IE9, and iOS 6 support. B4 is supported on IE10+ and iOS 7+. If users need older browser support then we can use bootstrap 3. It’s the most stable version of the bootstrap.
More changes in the Font size and new classes:-
1) Bootstrap 4 use rem and em Instead of px. With rem (unit of measurement), all font sizes are relative to the root element (the html tag). The reason for this is to make it easier to scale for devices. We could technically change the html tag to a smaller or larger size to scale all font sizes equally, which is a very nice feature.
2) Bootstrap 4 provides eight outline/bordered buttons classes
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success……etc.V4 dropped the .btn-default class and introduced the .btn-secondary, .btn-light, and .btn-dark classes.
3) Bootstrap 4 Use .img-fluid class for image responsive class instead of .img-responsive
4) Bootstrap 4 Introduced new floats and responsive floats classes. .float-left and .float-right, .float-none (used if we don’t need any float). For responsive purpose, we can use these classes with grid layout based also e.g:- .float-sm-right, .float-md-right. V4 also introduced some width, max-width and height classes as well e.g:- (.w-25, .w-50, .w-75, .w-100, .mw-100) // used for width of the div or element
(.h-25, .h-50, .h-75, .h-100, .mh-100) // used for height of the div or element
5) Bootstrap 4 does not support Glyphicons which was in the older version.