As Bootstrap 4 introduced some new welcomed features, it also has made some refinements to previous Bootstrap components.
To improve readability the base font size in Bootstrap 3,
~14px, has been bumped up to
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
SASS is the pre-processor of choice now. Make sure you replace those
@ symbols for
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!
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.
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.
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
Several classes from Bootstrap 3 have been refactored and renamed, these include:
Used to be used, in Bootstrap 3, using
.img-responsive, replaced with
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
To create larger or smaller input fields, you used to define
.input-smaller. This has now been renamed to
.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