Why Reboot is created for Boortstap 4 instead of using Normalize?
You might have used normalize in your projects. Bootstrap 4 has created its on version on top of the normalize called reboot.
If you are not familiar with normalize, it overwrites browser’s default CSS to eliminate browser inconsistencies, like different font sizes, or margin etc. It also add many CSS rules that helps you make your CSS code more cross browser compatible.
“Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.”
Take a look at following screenshots and notice the difference in the styling of page when no CSS is applied to it, and with both normalize.css and reboot.css applied to it.
A dummy page without any CSS applied to it.
Same page with normalize.css applied to it.
Same page with reboot.css applied to it.
Let’s take a look at some major updates in reboot, to understand why bootstrap 4 is using reboot instead of normalize.
box-sizing: border-box; on every element.
box-sizing: content-box to
border-box so that when you add
padding or border’s to an element, the overall declared
width does not change. For example,
width: 100px; will always be
100px despite the
border: 10px solid red; and
Make viewport responsive
IE10+ do not support
<meta name="viewport"> in some cases. Bootstrap 4 has added a fix for this issue in reboot css.
Added 16px base font size on body.
Because bootstrap 4 is using EMs and REMs as units, a base font size is needed. A base font size of 16px is added on body. All elements inherit font size from body, so its very convenient to change size of all elements when viewport changes in responsive layouts by just changing font size on body.
For more details on how this works, please read “Understanding EMs and REMs”.
Updated to EMs and REMs
All units are changes to EMs and REMs from pixels used in normalize css, to support bootstrap’s mobile first approach. This is very useful in responsive layouts.
You might have encountered collapsing margins. When two elements have
margin-bottom applied to them, margin with smaller value get overlapped or collapsed. For example, if we have
margin-bottom: 20px; applied on a
H1 tag, and
margin-top: 10px; applied on a
p tag below it. You will get 20px margin, instead of 30px that you might be expecting.
To overcome this issue, bootstrap 4 have removed
margin-top from all elements and only used
inherit where possible to improve reusability of code
Bootstrap is using ‘inherit’ for font related properties where possible, to reduce repetition as much possible. It also make it easier to make changes from one place to update typography of your website.
Native font stack
Native font stack is changed in reboot css to improve font rendering and readability of text.
There are many other small but useful changes. You can read the comments added in SCSS file itself, if you wish to know more about the code of Reboot CSS.