<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/content/docs/4.6/content/reboot.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<h1class="bd-title"id="content">Reboot</h1>
</div>
<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 <code><table></code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>
<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>
<ul>
<li>Update some browser default values to use <code>rem</code>s instead of <code>em</code>s for scalable component spacing.</li>
<li>Avoid <code>margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code>margin</code> is a simpler mental model.</li>
<li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li>
<li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li>
</ul>
<h2id="page-defaults">Page defaults</h2>
<p>The <code><html></code> and <code><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
<ul>
<li>The <code>box-sizing</code> is globally set on every element—including <code>*::before</code> and <code>*::after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
<li>No base <code>font-size</code> is declared on the <code><html></code>, but <code>16px</code> is assumed (the browser default). <code>font-size: 1rem</code> is applied on the <code><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
<li>The <code><body></code> also sets a global <code>font-family</code>, <code>line-height</code>, and <code>text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
<li>For safety, the <code><body></code> has a declared <code>background-color</code>, defaulting to <code>#fff</code>.</li>
</ul>
<h2id="native-font-stack">Native font stack</h2>
<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="nv">!default</span><spanclass="p">;</span>
</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
<p>This <code>font-family</code> is applied to the <code><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p>
<h2id="headings-and-paragraphs">Headings and paragraphs</h2>
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
<p>All lists—<code><ul></code>, <code><ol></code>, and <code><dl></code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>.</p>
<divclass="bd-example">
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<ol>
<li>Here’s an ordered list</li>
<li>With a few list items</li>
<li>It has the same overall look</li>
<li>As the previous unordered list</li>
</ol>
</div>
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code>margin</code>s. <code><dd></code>s reset <code>margin-left</code> to <code>0</code> and add <code>margin-bottom: .5rem</code>. <code><dt></code>s are <strong>bolded</strong>.</p>
<divclass="bd-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Term</dt>
<dd>Definition for the term.</dd>
<dd>A second definition for the same term.</dd>
<dt>Another term</dt>
<dd>Definition for this other term.</dd>
</dl>
</div>
<h2id="preformatted-text">Preformatted text</h2>
<p>The <code><pre></code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p>
<divclass="bd-example">
<pre>
.example-element {
margin-bottom: 1rem;
}
</pre>
</div>
<h2id="tables">Tables</h2>
<p>Tables are slightly adjusted to style <code><caption></code>s, collapse borders, and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <ahref="/docs/4.6/content/tables/">the <code>.table</code> class</a>.</p>
<divclass="bd-example">
<table>
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h2id="forms">Forms</h2>
<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>
<ul>
<li><code><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><code><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
<li><code><label></code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li>
<li><code><input></code>s, <code><select></code>s, <code><textarea></code>s, and <code><button></code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li>
<li><code><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
<li><code><button></code>s and <code><input></code> button elements have <code>cursor: pointer</code> when <code>:not(:disabled)</code>.</li>
</ul>
<p>These changes, and more, are demonstrated below.</p>
<h3id="pointers-on-buttons">Pointers on buttons</h3>
<p>Reboot includes an enhancement for <code>role="button"</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code><button></code> elements, which get their own <code>cursor</code> change.</p>
<divclass="bd-example">
<spanrole="button"tabindex="0">Non-button element button</span>
</div><divclass="highlight"><preclass="chroma"><codeclass="language-html"data-lang="html"><spanclass="p"><</span><spanclass="nt">span</span><spanclass="na">role</span><spanclass="o">=</span><spanclass="s">"button"</span><spanclass="na">tabindex</span><spanclass="o">=</span><spanclass="s">"0"</span><spanclass="p">></span>Non-button element button<spanclass="p"></</span><spanclass="nt">span</span><spanclass="p">></span></code></pre></div>
<h2id="misc-elements">Misc elements</h2>
<h3id="address">Address</h3>
<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br></code>.</p>
<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>, so we reset that to <code>0 0 1rem</code> for something more consistent with other elements.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<h3id="inline-elements">Inline elements</h3>
<p>The <code><abbr></code> element receives basic styling to make it stand out amongst paragraph text.</p>
<divclass="bd-example">
Nulla <abbrtitle="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div>
<h3id="summary">Summary</h3>
<p>The default <code>cursor</code> on summary is <code>text</code>, so we reset that to <code>pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<divclass="bd-example">
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<detailsopen>
<summary>Even more details</summary>
<p>Here are even more details about the details.</p>
<p>HTML5 adds <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <ahref="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden. While <code>[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<p><code>[hidden]</code> is not compatible with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements.
</div>
<p>To merely toggle the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document, use <ahref="/docs/4.6/utilities/visibility/">the <code>.invisible</code> class</a> instead.</p>
