BOOTSTRAP 4 OVERVIEW
Bootstrap 4 is an awesome platform; it is a fast loading and lightweight framework. Here are top five reasons to choose Bootstrap 4:
- Powerful Grid System
- Rapid Development
- Wide Browser Compatibility
- Open source.
Bootstrap 4 is based on flex modal for grid system and supports all latest browsers including Internet Explorer 10 + and iOS 7+. Things which were difficult in the previous version are now much easier with flexbox grid like equal-heights columns and vertical centering. Bootstrap source is now SASS (Syntactically Awesome Style Sheets): a CSS preprocessor which enables you to use things like variables, nested rules, inline imports, mixins and much more. It helps you to keep things organized and allows you to create stylesheets much faster. It also helps you to break large style sheets into partials.
Bootstrap 4 supports all the major default browsers for mobile phones/devices. However, some proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
|Microsoft Edge||Chrome||Firefox||Safari||Android Browser & Web View|
|Android||Supported||Supported||Supported||N/A||Android v5.0+ Supported|
|Windows 10 Mobile||Supported||N/A||N/A||N/A||N/A|
Bootstrap 4 supports most of the default desktop browsers. If you require IE 8 or IE 9 support, you can use Bootstrap 3
|Microsoft Edge||Chrome||Firefox||Internet Explorer||Opera||Safari|
|Windows||Supported||Supported||Supported||Supported, IE10+||Supported||Not Supported|
DIFFERENT VERSIONS OF Bootstrap
Below are the Major bootstrap versions being used currently:
- Bootstrap 3 and its minor version.
- Bootstrap 4 with minor release (In bootstrap 4.3 they have added some new utilities and deprecated some unused code.)
NEW / IMPROVED FEATURES IN BOOTSTRAP 4
Let us see the new and improved features that are introduced in bootstrap 4.
- Style Sheets: Biggest change in bootstrap 4 is moving from LESS (Leaner Style Sheet) to SASS, which is much faster to compile.
- Much-Improved Media Query: Issues of relating to multiple devices/screen sizes having different widths and heights can be solved by targeting five groups using the media query.
- Ordering table columns: Controlling the visual order of your table column, you can set order of column by breakpoint (e.g. order-1, order-md-2)
- Displaying heading: Display headings are designed to stand out more than the normal headings that come with four sizes of headings.
- Font Awesome support for icons: Font Awesome is made up of symbols, icons, or pictograms. You can use them in a webpage, just like a font.
- New Grid system for smaller mobile screens: Bootstrap 4 supports almost every device. Right from high end devices to lower end devices, using a five grid system which helps developers to target smaller devices under 480 px size
- Cards: Cards are used to display information as a container, such as headers, images, text, links, backgrounds, footers and much more.
- New Classes for spacing: New spacing classes help developers to work much faster on paddings and margins in their applications.
- Popovers and Tooltips: Popovers and tooltips are easy to use with third party (tither) library.
- Components: It uses a collection of content used to display text, blocks of code, images, content in tabular format, below is a list of different components available in Bootstrap 4
- Input organization
Deprecated and removed features from Bootstrap 3
Below features / components are deprecated in Bootstrap 4
REASONS TO CHOOSE BOOTSTRAP 4 CSS FRAMEWORK
- Easy to get started
- Great Grid System
- Broad scope in the list of components
- Great documentation with examples and demos
MIGRATING FROM BOOTSTRAP 3 TO BOOTSTRAP 4
As bootstrap 4 is a major rewrite of the entire framework, here are the most notable changes including Flexbox which can be considered as one of the significant achievements.
Forms, input groups, Browser support (dropped IE8, IE9 and iOS 6), Grid System, Components, Reboot, Typography, Images, Tables, Buttons, Button group, Dropdowns, List Groups, Modal, Navs, Navbars, Pagination, Breadcrumbs, Labels, Carousel, Table etc.
|Parameters||Bootstrap 3||Bootstrap 4|
|Size (minified)||117 kb||147 kb|
|Browser Support||IE 8, IE 9, all major modern browsers||IE10+, iOS 7+, all major modern browsers|
|Grid||4 grid tier||5 grid tier|
|Dark/inverse Tables||Not supported||Added dark/inverse table|
|Table head styles||Not supported||Added table head with light and dark styles|
|Components||Panels, thumbnails, and wells||Introduced Cards|
|Contextual classes||Doesn’t use table- prefix classes||Added table- prefix classes|
|Icons||Glyphicon||Font Awesome, Iconic, Octicons|
Bootstrap 4 has made a lot of improvement, optimizations and clean ups around unnecessary elements and classes throughout the framework. You can visit Bootstrap’s official website (https://getbootstrap.com/docs/4.0/getting-started/introduction/ ) to learn more about making much quicker, streamlined and mobile friendly websites and applications.
Here are few references, which are very helpful for exploring bootstrap 4
- List of all bootstrap classes, class names are self-explanatory and easy to understand
- Bootstrap cheat sheet