Lesson 5 +10 XP

Important Bootstrap Globals

Bootstrap applies a handful of global styles that affect every page that uses it. Knowing these helps you avoid surprises.

1. HTML5 doctype

Bootstrap requires the HTML5 doctype. Without it, you will see some incomplete styling:

<!doctype html>
<html lang="en">
  ...
</html>

2. Box-sizing

Bootstrap switches the global box-sizing from content-box to border-box. This ensures padding does not affect the final computed width of an element.

If you ever need to override it for a third-party widget, you can:

.selector-for-some-widget {
  box-sizing: content-box;
}

3. Reboot

Bootstrap uses Reboot, a set of CSS resets that correct inconsistencies across browsers and devices. It normalizes things like headings, lists, forms, and table styles so they look consistent everywhere.

4. Responsive meta tag

To make mobile-first designs work, add the responsive viewport meta tag to your head.

TL;DR

Bootstrap needs the HTML5 doctype.
Box-sizing is border-box globally.
Reboot normalizes styles across browsers.
Always include the viewport meta tag.

Important Bootstrap Globals