<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>
<ul>
<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.
<ul>
<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>
<divclass="bd-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
<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>
<divclass="bd-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<h2id="preformatted-text">Preformatted text</h2>
<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>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. This could potentially change in jQuery 3, but we’re not holding our breath. 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>
<h2id="click-delay-optimization-for-touch">Click delay optimization for touch</h2>
<p>Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a “tap” – the moment when a finger/stylus is lifted from screen – and the <ahref="https://developer.mozilla.org/en-US/docs/Web/Events/click"><codeclass="highlighter-rouge">click</code> event</a> being fired. This delay is necessary for these browsers to correctly handle “double-tap to zoom” gestures without prematurely triggering actions or links after the first “tap”, but it can make your site feel slightly sluggish and unresponsive.</p>
<p>Most mobile browsers automatically optimize away this 300ms delay for sites that use the <codeclass="highlighter-rouge">width=device-width</code> property as part of their <ahref="/bootstrap-material-design/docs/4.0/getting-started/introduction/#responsive-meta-tag">responsive meta tag</a> (as well as for sites that disable zooming, for instance with <codeclass="highlighter-rouge">user-scalable=no</code>, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) <ahref="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">prior to iOS 9.3</a>.</p>
<p>On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with “double-tap to zoom” functionality. As the <ahref="/bootstrap-material-design/docs/4.0/getting-started/introduction/#responsive-meta-tag">responsive meta tag</a> is ignored by all desktop browsers, using <codeclass="highlighter-rouge">width=device-width</code> will have no effect on the 300ms delay here.</p>
<p>To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action"><codeclass="highlighter-rouge">touch-action:manipulation</code> CSS property</a> on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.</p>
<p>In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as <ahref="https://github.com/ftlabs/fastclick">FastClick</a> to explicitly work around the delay.</p>
<p>For further details, see the compatibility table for <ahref="https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay">suppressing 300ms delay for touchscreen interactions</a>.</p>
