April 16, 2018 in Bootstrap, CSS

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.

Added box-sizing: border-box; on every element.

Change from 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 padding: 20px;.

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.

Removed margin-top

You might have encountered collapsing margins. When two elements have margin-top and 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 margin-bottom .

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.

URL: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

About the author

Jaspreet Kaur

Jaspreet is a UI/UX designer with expertise in front-end development for web and mobile. She is passionate about designing solutions through collaboration, iteration, and following the best technology development practices.

Leave a Reply

Your email address will not be published. Required fields are marked *