Reboot

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Every browser ships its own default stylesheet (the "user agent stylesheet"), and those defaults are not identical across browsers — a <button>, a <h1>, or a <fieldset> does not render pixel-identically in Chrome, Firefox, and Safari out of the box. Reboot is Bootstrap’s opinionated normalization layer: a single stylesheet, loaded first, that resets and restyles these raw elements to a consistent, sensible baseline before any of Bootstrap’s own components or utilities apply on top.

Reboot is not opt-in per component — it is part of bootstrap.css and applies globally to any page that loads Bootstrap’s CSS at all. There is no way to use Bootstrap’s grid or components without also getting Reboot’s element-level resets.

What Reboot changes

A representative (not exhaustive) list of what Reboot does relative to plain, un-normalized browser defaults:

box-sizing: border-box everywhere. Reboot applies box-sizing: border-box with the universal selector (*, *::before, *::after), the strategy recommended in The Box Model — not by setting it once on html and relying on inheritance; there is no box-sizing: inherit anywhere in Reboot. The distinction matters in practice: a wrapper that later sets box-sizing: content-box affects only that element under the universal-selector approach, whereas an inheritance-based reset would propagate the override to its descendants too. Either way, this is arguably Reboot’s single most consequential change: without it, width/height on any Bootstrap component would measure the content box only, and every padding/border value would silently grow the element’s rendered footprint.
Margins zeroed and then reintroduced deliberately. Browsers apply inconsistent default margins to headings, paragraphs, lists, and form elements. Reboot removes the browser defaults and reapplies a consistent margin-bottom on block-level typography elements (headings, <p>), so vertical rhythm is predictable rather than accidental.
A consistent base font and line-height. font-family, font-size (1rem, i.e. respecting the user’s browser font-size setting), and line-height are set once on <body> and inherited everywhere, replacing each browser’s own serif/sans-serif default.
<hr>, <b>/<strong>, and other legacy elements normalized. For example, <b> and <strong> are both forced to font-weight: bolder (some browsers otherwise treat <b> as merely non-italic rather than bold).
Form elements inherit typography instead of using the OS-native font. By default, <button>, <input>, <select>, and <textarea> do not inherit the page’s font in most browsers — they use the operating system’s native form-control font. Reboot forces them to font: inherit, so form controls visually match the surrounding text.
vertical-align: middle on images and SVGs — not a responsive default. Reboot’s only rule for <img> and svg is vertical-align: middle, which removes the small gap browsers otherwise leave beneath an inline image. It does not set max-width/height — making an image scale down with its container is what the explicit .img-fluid utility, described in Images, is for, and it needs to be applied on every image that should behave that way.
Removed default <fieldset> styling and tap-highlight/outline quirks. <fieldset> loses its default border/padding/min-width (which vary wildly across browsers), and mobile tap-highlight colors are suppressed in favor of Bootstrap’s own focus styles.

None of these are visible utility classes — Reboot works entirely by restyling the bare HTML tag selectors (h1, p, button, img, and so on), which is why it applies automatically with zero markup changes.

Reboot vs. normalize.css vs. a hard reset

Three different philosophies exist for handling cross-browser default inconsistency, and Reboot sits deliberately in the middle of them:

Approach What it does

Approach	What it does
Hard reset (e.g. Eric Meyer’s `reset.css`)	Strips margin, padding, font-size, and other properties down to `0`/`inherit` on nearly every element, deliberately removing all browser styling opinions. Every element looks unstyled until the project’s own CSS adds everything back — maximum control, maximum up-front work.
normalize.css	Preserves useful browser defaults (heading sizes, list styling, etc.) but irons out cross-browser inconsistencies in those defaults, so the same element looks the same everywhere without erasing built-in styling entirely.
Bootstrap Reboot	Builds directly on top of normalize.css’s approach (early Bootstrap versions used normalize.css itself, and Reboot is its spiritual successor) but goes further: it also applies Bootstrap’s own opinionated baseline — specific margin values, `border-box` sizing, its own font stack — tuned specifically to work well with the rest of Bootstrap’s grid and components.

Hard reset (e.g. Eric Meyer’s reset.css)

Strips margin, padding, font-size, and other properties down to 0/inherit on nearly every element, deliberately removing all browser styling opinions. Every element looks unstyled until the project’s own CSS adds everything back — maximum control, maximum up-front work.

normalize.css

Preserves useful browser defaults (heading sizes, list styling, etc.) but irons out cross-browser inconsistencies in those defaults, so the same element looks the same everywhere without erasing built-in styling entirely.

Bootstrap Reboot

Builds directly on top of normalize.css’s approach (early Bootstrap versions used normalize.css itself, and Reboot is its spiritual successor) but goes further: it also applies Bootstrap’s own opinionated baseline — specific margin values, border-box sizing, its own font stack — tuned specifically to work well with the rest of Bootstrap’s grid and components.

The practical distinction: normalize.css alone tries to be a neutral, framework-agnostic starting point, whereas Reboot is intentionally not neutral — it assumes the page is also using the rest of Bootstrap, and some of its choices (the border-box box-sizing strategy in particular) exist specifically because Bootstrap’s own grid and components depend on them. This is also why Reboot cannot simply be swapped for plain normalize.css in a Bootstrap project without breaking layout: components authored against Reboot’s baseline assume Reboot’s specific resets are present.

Practical implications

Because Reboot’s resets apply globally and automatically, two things follow for anyone adding custom CSS alongside Bootstrap:

Do not re-add a separate reset/normalize stylesheet. Loading normalize.css (or a hard reset) before Bootstrap is redundant — Reboot already includes an equivalent normalization pass — and loading one after Bootstrap risks undoing Reboot’s border-box sizing or margin choices that the rest of Bootstrap’s CSS assumes are in place.
Custom component CSS can assume border-box sizing. Any project-specific component built alongside Bootstrap does not need to repeat the box-sizing reset from The Box Model — Reboot’s universal-selector rule already applies it to every element on the page. Because that rule isn’t inheritance-based, a component that deliberately sets box-sizing: content-box on one wrapper doesn’t need to undo the override on that wrapper’s descendants either — it was never propagated to them in the first place.

Reboot and native form controls

Native form elements are one of the areas where raw browser defaults diverge the most, and Reboot’s fixes to them are easy to miss until a form is styled without Bootstrap present for comparison:

/* A representative subset of Reboot's actual rules (simplified) */
button,
input,
optgroup,
select,
textarea {
  margin: 0;               /* Firefox/Safari otherwise add default margin */
  font-family: inherit;    /* form controls otherwise use the OS-native font */
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;    /* Firefox otherwise inherits button text-transform: none only partially */
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button; /* iOS Safari otherwise applies rounded native chrome styling */
}

Without this normalization, a <button> and a <p> on the same page can render in visibly different fonts even though no CSS in the project sets a font anywhere — the button silently falls back to the OS control font while the paragraph inherits the page’s font stack. This is one of the more common sources of "why does my button look wrong" confusion for anyone new to styling raw form elements.

Does Reboot conflict with a CSS-in-JS or component-scoped reset?

Frameworks that ship their own scoped reset (many component libraries, or CSS-in-JS solutions with a global style injection step) can conflict with Reboot if both target the same bare element selectors with different opinions — whichever stylesheet is inserted into the document later generally wins on equal specificity. In practice this means: if a project pairs Bootstrap with another styling system, load Bootstrap’s CSS (and therefore Reboot) first, and treat any additional reset as something to review for overlap rather than stack on blindly. The safest combination is usually to rely on Reboot alone and add only component-specific styles on top of it, rather than layering a second element-level reset over Bootstrap’s.

Reboot’s variables (base font stack, base font-size, body background/color, link color, and more) are themselves overridable through the same Sass !default mechanism as the rest of the framework — see Customization.

See the official Reboot page for the complete, exhaustive list of element-level changes.