<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.">
<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="highlighter-rouge"><table></code> styles for a simpler baseline and later provide <codeclass="highlighter-rouge">.table</code>, <codeclass="highlighter-rouge">.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 <codeclass="highlighter-rouge">rem</code>s instead of <codeclass="highlighter-rouge">em</code>s for scalable component spacing.</li>
<li>Avoid <codeclass="highlighter-rouge">margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <codeclass="highlighter-rouge">margin</code> is a simpler mental model.</li>
<li>For easier scaling across device sizes, block elements should use <codeclass="highlighter-rouge">rem</code>s for <codeclass="highlighter-rouge">margin</code>s.</li>
<li>Keep declarations of <codeclass="highlighter-rouge">font</code>-related properties to a minimum, using <codeclass="highlighter-rouge">inherit</code> whenever possible.</li>
</ul>
<h2id="page-defaults">Page defaults</h2>
<p>The <codeclass="highlighter-rouge"><spanclass="nt"><html></span></code> and <codeclass="highlighter-rouge"><body></code> elements are updated to provide better page-wide defaults. More specifically:</p>
<li>The <codeclass="highlighter-rouge">box-sizing</code> is globally set on every element—including <codeclass="highlighter-rouge">*::before</code> and <codeclass="highlighter-rouge">*::after</code>, to <codeclass="highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
<li>No base <codeclass="highlighter-rouge">font-size</code> is declared on the <codeclass="highlighter-rouge"><spanclass="nt"><html></span></code>, but <codeclass="highlighter-rouge">16px</code> is assumed (the browser default). <codeclass="highlighter-rouge">font-size: 1rem</code> is applied on the <codeclass="highlighter-rouge"><body></code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
</ul>
</li>
<li>The <codeclass="highlighter-rouge"><body></code> also sets a global <codeclass="highlighter-rouge">font-family</code>, <codeclass="highlighter-rouge">line-height</code>, and <codeclass="highlighter-rouge">text-align</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
<li>For safety, the <codeclass="highlighter-rouge"><body></code> has a declared <codeclass="highlighter-rouge">background-color</code>, defaulting to <codeclass="highlighter-rouge">#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>
<p>This <codeclass="highlighter-rouge">font-family</code> is applied to the <codeclass="highlighter-rouge"><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <codeclass="highlighter-rouge">font-family</code>, update <codeclass="highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
<h2id="headings-and-paragraphs">Headings and paragraphs</h2>
<p>All heading elements—e.g., <codeclass="highlighter-rouge"><h1></code>—and <codeclass="highlighter-rouge"><p></code> are reset to have their <codeclass="highlighter-rouge">margin-top</code> removed. Headings have <codeclass="highlighter-rouge">margin-bottom: .5rem</code> added and paragraphs <codeclass="highlighter-rouge">margin-bottom: 1rem</code> for easy spacing.</p>
<p>All lists—<codeclass="highlighter-rouge"><ul></code>, <codeclass="highlighter-rouge"><ol></code>, and <codeclass="highlighter-rouge"><dl></code>—have their <codeclass="highlighter-rouge">margin-top</code> removed and a <codeclass="highlighter-rouge">margin-bottom: 1rem</code>. Nested lists have no <codeclass="highlighter-rouge">margin-bottom</code>.</p>
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <codeclass="highlighter-rouge">margin</code>s. <codeclass="highlighter-rouge"><dd></code>s reset <codeclass="highlighter-rouge">margin-left</code> to <codeclass="highlighter-rouge">0</code> and add <codeclass="highlighter-rouge">margin-bottom: .5rem</code>. <codeclass="highlighter-rouge"><dt></code>s are <strong>bolded</strong>.</p>
<p>The <codeclass="highlighter-rouge"><pre></code> element is reset to remove its <codeclass="highlighter-rouge">margin-top</code> and use <codeclass="highlighter-rouge">rem</code> units for its <codeclass="highlighter-rouge">margin-bottom</code>.</p>
<p>Tables are slightly adjusted to style <codeclass="highlighter-rouge"><caption></code>s, collapse borders, and ensure consistent <codeclass="highlighter-rouge">text-align</code> throughout. Additional changes for borders, padding, and more come with <ahref="/bootstrap-material-design/docs/4.0/content/tables/">the <codeclass="highlighter-rouge">.table</code> class</a>.</p>
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><codeclass="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="highlighter-rouge"><legend></code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
<li><codeclass="highlighter-rouge"><label></code>s are set to <codeclass="highlighter-rouge">display: inline-block</code> to allow <codeclass="highlighter-rouge">margin</code> to be applied.</li>
<li><codeclass="highlighter-rouge"><input></code>s, <codeclass="highlighter-rouge"><select></code>s, <codeclass="highlighter-rouge"><textarea></code>s, and <codeclass="highlighter-rouge"><button></code>s are mostly addressed by Normalize, but Reboot removes their <codeclass="highlighter-rouge">margin</code> and sets <codeclass="highlighter-rouge">line-height: inherit</code>, too.</li>
<li><codeclass="highlighter-rouge"><textarea></code>s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.</li>
</ul>
<p>These changes, and more, are demonstrated below.</p>
<p>The <codeclass="highlighter-rouge"><address></code> element is updated to reset the browser default <codeclass="highlighter-rouge">font-style</code> from <codeclass="highlighter-rouge">italic</code> to <codeclass="highlighter-rouge">normal</code>. <codeclass="highlighter-rouge">line-height</code> is also now inherited, and <codeclass="highlighter-rouge">margin-bottom: 1rem</code> has been added. <codeclass="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="highlighter-rouge"><br></code>.</p>
<divclass="bd-example">
<address>
<strong>Twitter, Inc.</strong><br/>
1355 Market St, Suite 900<br/>
San Francisco, CA 94103<br/>
<abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br/>
<ahref="mailto:#">first.last@example.com</a>
</address>
</div>
<h3id="blockquote">Blockquote</h3>
<p>The default <codeclass="highlighter-rouge">margin</code> on blockquotes is <codeclass="highlighter-rouge">1em 40px</code>, so we reset that to <codeclass="highlighter-rouge">0 0 1rem</code> for something more consistent with other elements.</p>
<divclass="bd-example">
<blockquoteclass="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <citetitle="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<h3id="inline-elements">Inline elements</h3>
<p>The <codeclass="highlighter-rouge"><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.
<p>The default <codeclass="highlighter-rouge">cursor</code> on summary is <codeclass="highlighter-rouge">text</code>, so we reset that to <codeclass="highlighter-rouge">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 <codeclass="highlighter-rouge">[hidden]</code></a>, which is styled as <codeclass="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="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <codeclass="highlighter-rouge">display</code> from getting accidentally overridden. While <codeclass="highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<p><codeclass="highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <codeclass="highlighter-rouge">$(...).hide()</code> and <codeclass="highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <codeclass="highlighter-rouge">[hidden]</code> over other techniques for managing the <codeclass="highlighter-rouge">display</code> of elements.</p>
<p>To merely toggle the visibility of an element, meaning its <codeclass="highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <ahref="/bootstrap-material-design/docs/4.0/utilities/visibility/">the <codeclass="highlighter-rouge">.invisible</code> class</a> instead.</p>
