<metaname="description"content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:description"content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<metaproperty="og:description"content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<aclass="btn btn-sm btn-bd-light my-2 my-md-0"href="https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.5/content/reboot.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<pclass="bd-lead">Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.</p>
<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <codeclass="language-plaintext highlighter-rouge"><table></code> styles for a simpler baseline and later provide <codeclass="language-plaintext highlighter-rouge">.table</code>, <codeclass="language-plaintext highlighter-rouge">.table-bordered</code>, and more.</p>
<li>Update some browser default values to use <codeclass="language-plaintext highlighter-rouge">rem</code>s instead of <codeclass="language-plaintext highlighter-rouge">em</code>s for scalable component spacing.</li>
<li>Avoid <codeclass="language-plaintext highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <codeclass="language-plaintext highlighter-rouge">margin</code> is a simpler mental model.</li>
<li>For easier scaling across device sizes, block elements should use <codeclass="language-plaintext highlighter-rouge">rem</code>s for <codeclass="language-plaintext highlighter-rouge">margin</code>s.</li>
<li>Keep declarations of <codeclass="language-plaintext highlighter-rouge">font</code>-related properties to a minimum, using <codeclass="language-plaintext highlighter-rouge">inherit</code> whenever possible.</li>
<p>The <codeclass="language-plaintext highlighter-rouge"><html></code> and <codeclass="language-plaintext highlighter-rouge"><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
<li>The <codeclass="language-plaintext highlighter-rouge">box-sizing</code> is globally set on every element—including <codeclass="language-plaintext highlighter-rouge">*::before</code> and <codeclass="language-plaintext highlighter-rouge">*::after</code>, to <codeclass="language-plaintext highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
<li>No base <codeclass="language-plaintext highlighter-rouge">font-size</code> is declared on the <codeclass="language-plaintext highlighter-rouge"><html></code>, but <codeclass="language-plaintext highlighter-rouge">16px</code> is assumed (the browser default). <codeclass="language-plaintext highlighter-rouge">font-size: 1rem</code> is applied on the <codeclass="language-plaintext highlighter-rouge"><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
<li>The <codeclass="language-plaintext highlighter-rouge"><body></code> also sets a global <codeclass="language-plaintext highlighter-rouge">font-family</code>, <codeclass="language-plaintext highlighter-rouge">line-height</code>, and <codeclass="language-plaintext highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
<li>For safety, the <codeclass="language-plaintext highlighter-rouge"><body></code> has a declared <codeclass="language-plaintext highlighter-rouge">background-color</code>, defaulting to <codeclass="language-plaintext highlighter-rouge">#fff</code>.</li>
<p>The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about <ahref="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
<spanclass="s2">"Apple Color Emoji"</span><spanclass="o">,</span><spanclass="s2">"Segoe UI Emoji"</span><spanclass="o">,</span><spanclass="s2">"Segoe UI Symbol"</span><spanclass="o">,</span><spanclass="s2">"Noto Color Emoji"</span><spanclass="o">!</span><spanclass="nt">default</span><spanclass="o">;</span></code></pre></figure>
<p>This <codeclass="language-plaintext highlighter-rouge">font-family</code> is applied to the <codeclass="language-plaintext highlighter-rouge"><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <codeclass="language-plaintext highlighter-rouge">font-family</code>, update <codeclass="language-plaintext highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
<p>All heading elements—e.g., <codeclass="language-plaintext highlighter-rouge"><h1></code>—and <codeclass="language-plaintext highlighter-rouge"><p></code> are reset to have their <codeclass="language-plaintext highlighter-rouge">margin-top</code> removed. Headings have <codeclass="language-plaintext highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <codeclass="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
<p>All lists—<codeclass="language-plaintext highlighter-rouge"><ul></code>, <codeclass="language-plaintext highlighter-rouge"><ol></code>, and <codeclass="language-plaintext highlighter-rouge"><dl></code>—have their <codeclass="language-plaintext highlighter-rouge">margin-top</code> removed and a <codeclass="language-plaintext highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <codeclass="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
<p>The <codeclass="language-plaintext highlighter-rouge"><pre></code> element is reset to remove its <codeclass="language-plaintext highlighter-rouge">margin-top</code> and use <codeclass="language-plaintext highlighter-rouge">rem</code> units for its <codeclass="language-plaintext highlighter-rouge">margin-bottom</code>.</p>
<p>Tables are slightly adjusted to style <codeclass="language-plaintext highlighter-rouge"><caption></code>s, collapse borders, and ensure consistent <codeclass="language-plaintext highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <ahref="/docs/4.5/content/tables/">the <codeclass="language-plaintext highlighter-rouge">.table</code> class</a>.</p>
<li><codeclass="language-plaintext highlighter-rouge"><fieldset></code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
<li><codeclass="language-plaintext highlighter-rouge"><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
<li><codeclass="language-plaintext highlighter-rouge"><label></code>s are set to <codeclass="language-plaintext highlighter-rouge">display: inline-block</code> to allow <codeclass="language-plaintext highlighter-rouge">margin</code> to be applied.</li>
<li><codeclass="language-plaintext highlighter-rouge"><input></code>s, <codeclass="language-plaintext highlighter-rouge"><select></code>s, <codeclass="language-plaintext highlighter-rouge"><textarea></code>s, and <codeclass="language-plaintext highlighter-rouge"><button></code>s are mostly addressed by Normalize, but Reboot removes their <codeclass="language-plaintext highlighter-rouge">margin</code> and sets <codeclass="language-plaintext highlighter-rouge">line-height: inherit</code>, too.</li>
<li><codeclass="language-plaintext highlighter-rouge"><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
<li><codeclass="language-plaintext highlighter-rouge"><button></code>s and <codeclass="language-plaintext highlighter-rouge"><input></code> button elements have <codeclass="language-plaintext highlighter-rouge">cursor: pointer</code> when <codeclass="language-plaintext highlighter-rouge">:not(:disabled)</code>.</li>
<p>Reboot includes an enhancement for <codeclass="language-plaintext highlighter-rouge">role="button"</code> to change the default cursor to <codeclass="language-plaintext highlighter-rouge">pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <codeclass="language-plaintext highlighter-rouge"><button></code> elements, which get their own <codeclass="language-plaintext highlighter-rouge">cursor</code> change.</p>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><span</span><spanclass="na">role=</span><spanclass="s">"button"</span><spanclass="na">tabindex=</span><spanclass="s">"0"</span><spanclass="nt">></span>Non-button element button<spanclass="nt"></span></span></code></pre></figure>
<p>The <codeclass="language-plaintext highlighter-rouge"><address></code> element is updated to reset the browser default <codeclass="language-plaintext highlighter-rouge">font-style</code> from <codeclass="language-plaintext highlighter-rouge">italic</code> to <codeclass="language-plaintext highlighter-rouge">normal</code>. <codeclass="language-plaintext highlighter-rouge">line-height</code> is also now inherited, and <codeclass="language-plaintext highlighter-rouge">margin-bottom: 1rem</code> has been added. <codeclass="language-plaintext highlighter-rouge"><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <codeclass="language-plaintext highlighter-rouge"><br></code>.</p>
<p>The default <codeclass="language-plaintext highlighter-rouge">margin</code> on blockquotes is <codeclass="language-plaintext highlighter-rouge">1em 40px</code>, so we reset that to <codeclass="language-plaintext highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
<p>The <codeclass="language-plaintext highlighter-rouge"><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
<p>The default <codeclass="language-plaintext highlighter-rouge">cursor</code> on summary is <codeclass="language-plaintext highlighter-rouge">text</code>, so we reset that to <codeclass="language-plaintext highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<p>HTML5 adds <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <codeclass="language-plaintext highlighter-rouge">[hidden]</code></a>, which is styled as <codeclass="language-plaintext highlighter-rouge">display: none</code> by default. Borrowing an idea from <ahref="https://purecss.io/">PureCSS</a>, we improve upon this default by making <codeclass="language-plaintext highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <codeclass="language-plaintext highlighter-rouge">display</code> from getting accidentally overridden. While <codeclass="language-plaintext highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<p><codeclass="language-plaintext highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <codeclass="language-plaintext highlighter-rouge">$(...).hide()</code> and <codeclass="language-plaintext highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <codeclass="language-plaintext highlighter-rouge">[hidden]</code> over other techniques for managing the <codeclass="language-plaintext highlighter-rouge">display</code> of elements.</p>
<p>To merely toggle the visibility of an element, meaning its <codeclass="language-plaintext highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <ahref="/docs/4.5/utilities/visibility/">the <codeclass="language-plaintext highlighter-rouge">.invisible</code> class</a> instead.</p>
