Bootstrap Reboot

Bootstrap comes with a customized version of the Normalize stylesheet called Reboot. While reboot does try to make sure that elements will behave the same way across browsers, it adds some additional styles to make a web page look great right out of the box. Reboot was built using the following guidelines:

• Relies on inherit whenever possible
• Uses rem instead of em for scalable component spacing
• Avoids margin-top to avoid margin collapse
• Sets box-sizing to border-box for all elements
• Using native font stack for different devices and OS
• Uses CSS Variables for real-time customization with the need of SASS recompile

Bootstrap also provide base styles for many of most commonly used elements including: headers, lists, and tables. These elements have been styled using element selectors. This makes it easy to add additional styling later.

Bootstrap Typography

In addition, to the base styles, Bootstrap also include typography classes. We will cover many of them in more detail on the next page, but some helpful ones include the header classes (.h1 through .h6), which will match styles for the element, even if the element is not used.

<div class="h2">Header 2</div>

There is also display headings, which provides a different style header design to make them standout. There are four versions of display headers: .display-1 through .display-4. These classes can be used to override the existing header styles.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>