Reboot & Base Styles

Bootstrap has a set of styles called Reboot that attempt to create a consistent baseline accross browsers. Let's take a look at some of the key features that will help you get building sites quickly.

Improvements

• Use rems instead of ems
• Avoid margin-top
• inherit when possible

Try it

There are some really key features that affect all documents. First, Bootstrap modifies browser defaults to use Rems instead of ems. That makes the defaults a lot more consistent because rems or root ems are sized according to the default size of the page, which is usually 16 pixels.

Ems on the other hand are relative to the size of their containers, so the size of elements is more consistent when using rems.

Another key feature that affects your pages is that reboot removes margin-top from elements. Margins in HTML collapse, so if you have a headline with 10 pixels of margin at the bottom next to a paragraph with 5 pixels of margin at the top, the size of the margin isn't 15, but 10...in other words, it ignores the smaller margin. By resetting margins to the bottom only, there's less of a chance of having to guess which element controls the margin.

One of my favorite features is that almost all styles are set to inherit from their parents. That means that bootstrap is much easier to style. If you change the style of a component, anything inside that component will inherit things like fonts, sizes and colors.

Defaults

• Native sans-serif fonts
• Body background #fff
• Box sizing: border-box

Try it Docs

One of the quickest ways to tell wether bootstrap is installed or not is to take a look at the font. It defaults to a sans serif font instead of the obnoxious times new roman. But it's more than that. It uses the default font of the device instead of something like helvetica. That way, sites load super fast and look great by default.

Another quick way to tell that bootstrap is installed is that the background is set to white. For some crazy reason some browsers default to an ugly gray.

A less apparent change is the default box sizing. That's a property that determines the size of elements. The default value for this property is content-box, which honestly is a ridiculous value. If you have a set the width of an element 100 pixel box and then add a 10 pixel margin, the element ends up being 120 pixels wide (10 pixels on each side).

There's a lot of other modifications, but these are probably the most important to note, for more information, take a peek at the documentation which shows you what other default elements look like with reboot.