Autoría | Ultima modificación | Ver Log |
---layout: docstitle: Rebootdescription: 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.group: contentaliases: "/docs/4.6/content/"toc: true---## ApproachReboot 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 `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.Here are our guidelines and reasons for choosing what to override in Reboot:- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.## Page defaultsThe `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.## Native font stackThe 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 [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).```scss$font-family-sans-serif:// Safari for macOS and iOS (San Francisco)-apple-system,// Chrome < 56 for macOS (San Francisco)BlinkMacSystemFont,// Windows"Segoe UI",// AndroidRoboto,// Basic web fallback"Helvetica Neue", Arial,// Linux"Noto Sans","Liberation Sans",// Sans serif fallbacksans-serif,// Emoji fonts"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;```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 `color` styles.This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.## Headings and paragraphsAll heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.<table><thead><tr><th>Heading</th><th>Example</th></tr></thead><tbody><tr><td>{{< markdown >}}`<h1></h1>`{{< /markdown >}}</td><td><span class="h1">h1. Bootstrap heading</span></td></tr><tr><td>{{< markdown >}}`<h2></h2>`{{< /markdown >}}</td><td><span class="h2">h2. Bootstrap heading</span></td></tr><tr><td>{{< markdown >}}`<h3></h3>`{{< /markdown >}}</td><td><span class="h3">h3. Bootstrap heading</span></td></tr><tr><td>{{< markdown >}}`<h4></h4>`{{< /markdown >}}</td><td><span class="h4">h4. Bootstrap heading</span></td></tr><tr><td>{{< markdown >}}`<h5></h5>`{{< /markdown >}}</td><td><span class="h5">h5. Bootstrap heading</span></td></tr><tr><td>{{< markdown >}}`<h6></h6>`{{< /markdown >}}</td><td><span class="h6">h6. Bootstrap heading</span></td></tr></tbody></table>## ListsAll lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.<div class="bd-example">{{< markdown >}}* All lists have their top margin removed* And their bottom margin normalized* Nested lists have no bottom margin* This way they have a more even appearance* Particularly when followed by more list items* The left padding has also been reset1. Here's an ordered list2. With a few list items3. It has the same overall look4. As the previous unordered list{{< /markdown >}}</div>For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.<div class="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>## Preformatted textThe `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.<div class="bd-example"><pre>.example-element {margin-bottom: 1rem;}</pre></div>## TablesTables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).<div class="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>## FormsVarious form elements have been rebooted for simpler base styles. Here are some of the most notable changes:- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.These changes, and more, are demonstrated below.<form class="bd-example"><fieldset><legend>Example legend</legend><p><label for="input">Example input</label><input type="text" id="input" placeholder="Example input"></p><p><label for="select">Example select</label><select id="select"><option value="">Choose...</option><optgroup label="Option group 1"><option value="">Option 1</option><option value="">Option 2</option><option value="">Option 3</option></optgroup><optgroup label="Option group 2"><option value="">Option 4</option><option value="">Option 5</option><option value="">Option 6</option></optgroup></select></p><p><label><input type="checkbox" value="">Check this checkbox</label></p><p><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that</label><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.</label><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></p><p><label for="textarea">Example textarea</label><textarea id="textarea" rows="3"></textarea></p><p><label for="date">Example date</label><input type="date" id="date"></p><p><label for="time">Example time</label><input type="time" id="time"></p><p><label for="output">Example output</label><output name="result" id="output">100</output></p><p><button type="submit">Button submit</button><input type="submit" value="Input submit button"><input type="reset" value="Input reset button"><input type="button" value="Input button"></p><p><button type="submit" disabled>Button submit</button><input type="submit" value="Input submit button" disabled><input type="reset" value="Input reset button" disabled><input type="button" value="Input button" disabled></p></fieldset></form>### Pointers on buttonsReboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.{{< example >}}<span role="button" tabindex="0">Non-button element button</span>{{< /example >}}## Misc elements### AddressThe `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.<div class="bd-example"><address><strong>Twitter, Inc.</strong><br>1355 Market St, Suite 900<br>San Francisco, CA 94103<br><abbr title="Phone">P:</abbr> (123) 456-7890</address><address><strong>Full Name</strong><br><a href="mailto:first.last@example.com">first.last@example.com</a></address></div>### BlockquoteThe default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.<div class="bd-example"><blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote></div>### Inline elementsThe `<abbr>` element receives basic styling to make it stand out amongst paragraph text.<div class="bd-example">Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.</div>### SummaryThe default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.<div class="bd-example"><details><summary>Some details</summary><p>More info about the details.</p></details><details open><summary>Even more details</summary><p>Here are even more details about the details.</p></details></div>## HTML5 `[hidden]` attributeHTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.```html<input type="text" hidden>```{{< callout warning >}}##### jQuery incompatibility`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.{{< /callout >}}To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.