One of the changes that will have a big impact on upgrading are in a section called Reboot. Reboot introduces a lot of modern CSS best practices including: changing the base font-size to 16px, using Rems and ems for sizes, avoiding margin-top, using inherit when possible, border-box sizing on every element, and more.
- [Voiceover] One of the changes that's gonna have a big impact on upgrading as well as on how you design layouts is a section of the CSS in Bootstrap called Reboot. So let's take a look at that. Now Reboot is based on a popular set of CSS rules called normalize.css. Now this adds some styles to a page and it helps that page render more consistently in different browsers. Not all browsers have the same set of styles so you're essentially standardizing the styles across different platforms.
Now if you wanna learn more about normalize you can check out this url and take a look at the rules by clicking this Download button. So what Reboot is going to do is add some additional modern best practices on top of normalize and that's gonna make your layouts a little bit easier to work with. It's probably things that you're already doing like for example setting your font sizes to rems and ems instead of pixels. Now doing this is actually gonna change the default look of your Bootstrap sites and that means if you're upgrading a website from Bootstrap 3 to Bootstrap 4, you need to watch out for some of the changes that are gonna happen to your layout.
So let's take a look at the difference between a Bootstrap 3 website and a Bootstrap 4 site. Here we have the same content on a Bootstrap 3 page on the left, and a Bootstrap 4 page on the right-hand side. You can see that they're a little bit different. For example, the fonts are a little bigger on the right-hand side and you can see that some of the spacing and the headlines is different as well. First off, the font-size in Bootstrap 4 has changed from a default of 14px in Bootstrap 3 to 16px in Bootstrap 4.
That's why the fonts look a little bit bigger. So what's going on here our Bootstrap developer is getting old and need bigger fonts. Well, I personally like the bigger fonts. They're a little bit easier to read, but this has something to do with the next change. And that is Bootstrap is now using a combination of rems and ems instead of pixels to size most things. When you size with rems and ems, the sizes of element is based on whatever the default base font-size is.
That's 16px in almost every browser and that is why it's also reset by Reboot.css to 16px. Now this also gives you the ability to explore a technique called Component Sizing, and there's a really good article about that on CSS-Tricks you should check out. Now it has a really cool demo right here that shows you that with ems and rems you can make different modules size independently. So we can take this Sidebar Thing right here and make it a little bit bigger than the rest of the page, but then we also have the ability of resizing the entire document, and make that really small, and now if I resize the whole document font-size, it actually affects all the components as well.
So we can do both things. And that's the thinking behind using rems and ems for different components in Reboot.css. You'll also notice that the headings don't have margins at the top and bottom, but only at the bottom, and if you actually inspect what's going on in the browser, you'll be able to see this. Reboot.css avoids setting margins to the top of elements. The thinking here is that since margins collapse in CSS, in other words, if you have a headline with a margin of 30px at the bottom and a paragraph right next to it with a margin of 20px at the top, the margin will end up being actually 30px.
You think it might be 50, but the smaller margins collapse under the larger. Now by setting margins only in one direction, you make things more consistent. You can learn more about margin collapse in our course called CSS: Page Layouts with James Williamson. One of the things that was a little bit messy about Bootstrap 3 is how difficult it was to override existing classes. In Bootstrap 4, classes are now easier to override and in order to achieve that you'll notice that the inherit attribute is used as much as possible.
That way you can set the font-family on the body and every other element will just inherit that as well as in other values as it is reasonable. Now by default, browsers calculate the width of elements by adding the size plus the padding and the border of an element. That can create layout problems because when you specify that an object should be 300px in width, that only works if the element has no paddings or borders. Now in order to fix this, Bootstrap 4 sets the elements to use a border box that calculates the dimension of the elements.
Now that's gonna make things a lot more consistent and it's something that I use in just about any other project. So it's nice to see that Bootstrap implements that by default. Now there's a lot of other minor modifications in Reboot.css. You can check out the scss file at this url and take a look at all the changes for yourself.
- Installing the upgrade
- Using Reboot.css
- Using the new grid
- Working with new navigation and card components
- Understanding table and form changes