Bootstrap 4, the latest release of Bootstrap, is the most widely used & the popular HTML, CSS & JavaScript framework for developing responsive, mobile-first websites. It is made for projects of all sizes and can be used by all designers and developers that range from beginners to expert level of competency. In this blog, I will cover all the new features added / available in this new release of Bootstrap and tell the major changes from Bootstrap 3. Bootstrap framework is used as a quick start for web developers and designers to develop applications much faster without worrying too much about HTML and CSS. It is a free, open-source library, with readymade design templates available for typography along with many forms, buttons, navigation, JavaScript extensions and other interface components. The goal of Bootstrap 4 is to make developing responsive applications easier and faster in order to reduce the time to market.
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 |
iOS | Supported | Supported | Supported | Supported | N/A |
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 | |
Mac | Supported | Supported | Supported | Supported | ||
Windows | Supported | Supported | Supported | Supported, IE10+ | Supported | Not Supported |
Let us see the new and improved features that are introduced in 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 |
Source | LESS | SASS |
CSS unit | px | rem |
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 |
Flexbox | Not supported | Supported |
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.
The Anatomy Of Office 365 Migration
Dynamics 365 Business Central, Where Technology Leads Productivity
Proven Ways To Reduce Software Development Costs Without Losing Quality
Facilitating Business Continuity & Productivity Goals: MS Dynamics 365
SharePoint Cloud Vs On Premise – Find The Best Fit For Your Business