What Is New In Bootstrap 4?

Background

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 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
• Customization
• 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.

Browser Support

Mobile Devices:

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

Desktop Browsers:

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

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

Deprecated and removed features from Bootstrap 3

Below features / components are deprecated in Bootstrap 4

• Panels
• Thumbnails
• wells

Reasons to Choose Bootstrap 4 css framework

• Easy to get started
• Great Grid System
• Broad scope in the list of components
• Bundled JavaScript plugins
• 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.

Comparison Chart:

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

Conclusion

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.

Reference

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

  https://gist.github.com/JacobLett/3f16b4c857fdec22472ac20e3dd0366a

• Bootstrap cheat sheet

  https://hackerthemes.com/bootstrap-cheatsheet https://www.creative-tim.com/bootstrap-cheat-sheet https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index