As Bootstrap 4 introduced some new welcomed features, it also has made some refinements to previous Bootstrap components.

Base font size change

To improve readability the base font size in Bootstrap 3, ~14px, has been bumped up to ~16px.

Dropped support

To help reduce page bloat and to aid Bootstrap maintainers with the codebase, there have been several components that have been dropped from Bootstrap 4

LESS

SASS is the pre-processor of choice now. Make sure you replace those @ symbols for $ symbols!

Glyphicons

As there are many other similar projects, such as Font Awesome, there was no point loading in two different font libraries. You can even roll your own!

Online Customiser

The online customiser for Bootrap 3 on the getbootstrap.com website won’t be carried over for the Bootsrap 4 release. This was dropped “in favor of more extensive setup documentation and customized builds”. We personally recommend to make a duplicate of their bootstrap.scss file and _variables.scss to alter default styling and enable/disable components.

Non-responsive Bootstrap

It’s 2016. Websites should be built with a mobile-first approach, especially as Google is now ranking websites based on their mobile website. Therefore, the non-responsive Bootstrap theme has become unmaintained and dropped from Bootstrap 4.

Optional Theme

In Bootstrap 3 there was an additional stylesheet that added (some rather outdated) gradient effects to components such as buttons and navbars. This additional stylesheet has been dropped from Bootstrap 4.

Although, it is worth noting that gradients can be enabled via SCSS variables $enable-gradients: true.

Refactored classes

Several classes from Bootstrap 3 have been refactored and renamed, these include:

Image Responsive class

Used to be used, in Bootstrap 3, using .img-responsive, replaced with .img-fluid.

Button Default class

Buttons could have a “Default” styling in Bootstrap 3 using .btn-default, this has now been replaced with .btn-secondary. This sounds much more fitting adjacent to the .btn-primary class.

Input Form Sizing

To create larger or smaller input fields, you used to define .input-lg or .input-smaller. This has now been renamed to .form-control-lg or .form-control-sm which complements the .form-control class, which is used to get the default Bootstrap styling for input fields.

We have also done a guide covering what is new in Bootstrap 4. Do you require a new site built in Bootstrap 4, or an existing site migrated over to Bootstrap 4? Contact us on our website or give us a call on: 01785 250 222

What has changed in Bootstrap 4?