| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Reboot | |
| 4 | description: 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. | |
| 5 | group: content | |
| 6 | redirect_from: "/docs/4.2/content/" | |
| 7 | toc: true | |
| 8 | --- | |
| 9 | ||
| 10 | ## Approach | |
| 11 | ||
| 12 | 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 `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. | |
| 13 | ||
| 14 | Here are our guidelines and reasons for choosing what to override in Reboot: | |
| 15 | ||
| 16 | - Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. | |
| 17 | - Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. | |
| 18 | - For easier scaling across device sizes, block elements should use `rem`s for `margin`s. | |
| 19 | - Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. | |
| 20 | ||
| 21 | ## Page defaults | |
| 22 | ||
| 23 | The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: | |
| 24 | ||
| 25 | - 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. | |
| 26 | - 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. | |
| 27 | - 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. | |
| 28 | - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. | |
| 29 | ||
| 30 | ## Native font stack | |
| 31 | ||
| 32 | 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 [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). | |
| 33 | ||
| 34 | {% highlight sass %} | |
| 35 | $font-family-sans-serif: | |
| 36 | // Safari for macOS and iOS (San Francisco) | |
| 37 | -apple-system, | |
| 38 | // Chrome < 56 for macOS (San Francisco) | |
| 39 | BlinkMacSystemFont, | |
| 40 | // Windows | |
| 41 | "Segoe UI", | |
| 42 | // Android | |
| 43 | "Roboto", | |
| 44 | // Basic web fallback | |
| 45 | "Helvetica Neue", Arial, sans-serif, | |
| 46 | // Emoji fonts | |
| 47 | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; | |
| 48 | {% endhighlight %} | |
| 49 | ||
| 50 | 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. | |
| 51 | ||
| 52 | ## Headings and paragraphs | |
| 53 | ||
| 54 | All 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. | |
| 55 | ||
| 56 | <table> | |
| 57 | <thead> | |
| 58 | <tr> | |
| 59 | <th>Heading</th> | |
| 60 | <th>Example</th> | |
| 61 | </tr> | |
| 62 | </thead> | |
| 63 | <tbody> | |
| 64 | <tr> | |
| 65 | <td> | |
| 66 | {{ "`<h1></h1>`" | markdownify }} | |
| 67 | </td> | |
| 68 | <td><span class="h1">h1. Bootstrap heading</span></td> | |
| 69 | </tr> | |
| 70 | <tr> | |
| 71 | <td> | |
| 72 | {{ "`<h2></h2>`" | markdownify }} | |
| 73 | </td> | |
| 74 | <td><span class="h2">h2. Bootstrap heading</span></td> | |
| 75 | </tr> | |
| 76 | <tr> | |
| 77 | <td> | |
| 78 | {{ "`<h3></h3>`" | markdownify }} | |
| 79 | </td> | |
| 80 | <td><span class="h3">h3. Bootstrap heading</span></td> | |
| 81 | </tr> | |
| 82 | <tr> | |
| 83 | <td> | |
| 84 | {{ "`<h4></h4>`" | markdownify }} | |
| 85 | </td> | |
| 86 | <td><span class="h4">h4. Bootstrap heading</span></td> | |
| 87 | </tr> | |
| 88 | <tr> | |
| 89 | <td> | |
| 90 | {{ "`<h5></h5>`" | markdownify }} | |
| 91 | </td> | |
| 92 | <td><span class="h5">h5. Bootstrap heading</span></td> | |
| 93 | </tr> | |
| 94 | <tr> | |
| 95 | <td> | |
| 96 | {{ "`<h6></h6>`" | markdownify }} | |
| 97 | </td> | |
| 98 | <td><span class="h6">h6. Bootstrap heading</span></td> | |
| 99 | </tr> | |
| 100 | </tbody> | |
| 101 | </table> | |
| 102 | ||
| 103 | ## Lists | |
| 104 | ||
| 105 | All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. | |
| 106 | ||
| 107 | <div class="bd-example"> | |
| 108 | {% capture markdown %} | |
| 109 | * Lorem ipsum dolor sit amet | |
| 110 | * Consectetur adipiscing elit | |
| 111 | * Integer molestie lorem at massa | |
| 112 | * Facilisis in pretium nisl aliquet | |
| 113 | * Nulla volutpat aliquam velit | |
| 114 | * Phasellus iaculis neque | |
| 115 | * Purus sodales ultricies | |
| 116 | * Vestibulum laoreet porttitor sem | |
| 117 | * Ac tristique libero volutpat at | |
| 118 | * Faucibus porta lacus fringilla vel | |
| 119 | * Aenean sit amet erat nunc | |
| 120 | * Eget porttitor lorem | |
| 121 | ||
| 122 | 1. Lorem ipsum dolor sit amet | |
| 123 | 2. Consectetur adipiscing elit | |
| 124 | 3. Integer molestie lorem at massa | |
| 125 | 4. Facilisis in pretium nisl aliquet | |
| 126 | 5. Nulla volutpat aliquam velit | |
| 127 | 6. Faucibus porta lacus fringilla vel | |
| 128 | 7. Aenean sit amet erat nunc | |
| 129 | 8. Eget porttitor lorem | |
| 130 | {% endcapture %} | |
| 131 | {{ markdown | markdownify }} | |
| 132 | </div> | |
| 133 | ||
| 134 | 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**. | |
| 135 | ||
| 136 | <div class="bd-example"> | |
| 137 | <dl> | |
| 138 | <dt>Description lists</dt> | |
| 139 | <dd>A description list is perfect for defining terms.</dd> | |
| 140 | <dt>Euismod</dt> | |
| 141 | <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> | |
| 142 | <dd>Donec id elit non mi porta gravida at eget metus.</dd> | |
| 143 | <dt>Malesuada porta</dt> | |
| 144 | <dd>Etiam porta sem malesuada magna mollis euismod.</dd> | |
| 145 | </dl> | |
| 146 | </div> | |
| 147 | ||
| 148 | ## Preformatted text | |
| 149 | ||
| 150 | The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`. | |
| 151 | ||
| 152 | <div class="bd-example"> | |
| 153 | <pre> | |
| 154 | .example-element { | |
| 155 | margin-bottom: 1rem; | |
| 156 | } | |
| 157 | </pre> | |
| 158 | </div> | |
| 159 | ||
| 160 | ## Tables | |
| 161 | ||
| 162 | Tables 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/tables/). | |
| 163 | ||
| 164 | <div class="bd-example"> | |
| 165 | <table> | |
| 166 | <caption> | |
| 167 | This is an example table, and this is its caption to describe the contents. | |
| 168 | </caption> | |
| 169 | <thead> | |
| 170 | <tr> | |
| 171 | <th>Table heading</th> | |
| 172 | <th>Table heading</th> | |
| 173 | <th>Table heading</th> | |
| 174 | <th>Table heading</th> | |
| 175 | </tr> | |
| 176 | </thead> | |
| 177 | <tbody> | |
| 178 | <tr> | |
| 179 | <td>Table cell</td> | |
| 180 | <td>Table cell</td> | |
| 181 | <td>Table cell</td> | |
| 182 | <td>Table cell</td> | |
| 183 | </tr> | |
| 184 | <tr> | |
| 185 | <td>Table cell</td> | |
| 186 | <td>Table cell</td> | |
| 187 | <td>Table cell</td> | |
| 188 | <td>Table cell</td> | |
| 189 | </tr> | |
| 190 | <tr> | |
| 191 | <td>Table cell</td> | |
| 192 | <td>Table cell</td> | |
| 193 | <td>Table cell</td> | |
| 194 | <td>Table cell</td> | |
| 195 | </tr> | |
| 196 | </tbody> | |
| 197 | </table> | |
| 198 | </div> | |
| 199 | ||
| 200 | ## Forms | |
| 201 | ||
| 202 | Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: | |
| 203 | ||
| 204 | - `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. | |
| 205 | - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts. | |
| 206 | - `<label>`s are set to `display: inline-block` to allow `margin` to be applied. | |
| 207 | - `<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. | |
| 208 | - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout. | |
| 209 | ||
| 210 | These changes, and more, are demonstrated below. | |
| 211 | ||
| 212 | <form class="bd-example"> | |
| 213 | <fieldset> | |
| 214 | <legend>Example legend</legend> | |
| 215 | ||
| 216 | <p> | |
| 217 | <label for="input">Example input</label> | |
| 218 | <input type="text" id="input" placeholder="Example input"> | |
| 219 | </p> | |
| 220 | ||
| 221 | <p> | |
| 222 | <label for="select">Example select</label> | |
| 223 | <select id="select"> | |
| 224 | <option value="">Choose...</option> | |
| 225 | <optgroup label="Option group 1"> | |
| 226 | <option value="">Option 1</option> | |
| 227 | <option value="">Option 2</option> | |
| 228 | <option value="">Option 3</option> | |
| 229 | </optgroup> | |
| 230 | <optgroup label="Option group 2"> | |
| 231 | <option value="">Option 4</option> | |
| 232 | <option value="">Option 5</option> | |
| 233 | <option value="">Option 6</option> | |
| 234 | </optgroup> | |
| 235 | </select> | |
| 236 | </p> | |
| 237 | ||
| 238 | <p> | |
| 239 | <label> | |
| 240 | <input type="checkbox" value=""> | |
| 241 | Check this checkbox | |
| 242 | </label> | |
| 243 | </p> | |
| 244 | ||
| 245 | <p> | |
| 246 | <label> | |
| 247 | <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> | |
| 248 | Option one is this and that | |
| 249 | </label> | |
| 250 | <label> | |
| 251 | <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> | |
| 252 | Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. | |
| 253 | </label> | |
| 254 | <label> | |
| 255 | <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> | |
| 256 | Option three is disabled | |
| 257 | </label> | |
| 258 | </p> | |
| 259 | ||
| 260 | <p> | |
| 261 | <label for="textarea">Example textarea</label> | |
| 262 | <textarea id="textarea" rows="3"></textarea> | |
| 263 | </p> | |
| 264 | ||
| 265 | <p> | |
| 266 | <label for="date">Example date</label> | |
| 267 | <input type="date" id="date"> | |
| 268 | </p> | |
| 269 | ||
| 270 | <p> | |
| 271 | <label for="time">Example time</label> | |
| 272 | <input type="time" id="time"> | |
| 273 | </p> | |
| 274 | ||
| 275 | <p> | |
| 276 | <label for="output">Example output</label> | |
| 277 | <output name="result" id="output">100</output> | |
| 278 | </p> | |
| 279 | ||
| 280 | <p> | |
| 281 | <button type="submit">Button submit</button> | |
| 282 | <input type="submit" value="Input submit button"> | |
| 283 | <input type="button" value="Input button"> | |
| 284 | </p> | |
| 285 | ||
| 286 | <p> | |
| 287 | <button type="submit" disabled>Button submit</button> | |
| 288 | <input type="submit" value="Input submit button" disabled> | |
| 289 | <input type="button" value="Input button" disabled> | |
| 290 | </p> | |
| 291 | </fieldset> | |
| 292 | </form> | |
| 293 | ||
| 294 | ## Misc elements | |
| 295 | ||
| 296 | ### Address | |
| 297 | ||
| 298 | The `<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>`. | |
| 299 | ||
| 300 | <div class="bd-example"> | |
| 301 | <address> | |
| 302 | <strong>Twitter, Inc.</strong><br> | |
| 303 | 1355 Market St, Suite 900<br> | |
| 304 | San Francisco, CA 94103<br> | |
| 305 | <abbr title="Phone">P:</abbr> (123) 456-7890 | |
| 306 | </address> | |
| 307 | ||
| 308 | <address> | |
| 309 | <strong>Full Name</strong><br> | |
| 310 | <a href="mailto:first.last@example.com">first.last@example.com</a> | |
| 311 | </address> | |
| 312 | </div> | |
| 313 | ||
| 314 | ### Blockquote | |
| 315 | ||
| 316 | The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. | |
| 317 | ||
| 318 | <div class="bd-example"> | |
| 319 | <blockquote class="blockquote"> | |
| 320 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| 321 | <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
| 322 | </blockquote> | |
| 323 | </div> | |
| 324 | ||
| 325 | ### Inline elements | |
| 326 | ||
| 327 | The `<abbr>` element receives basic styling to make it stand out amongst paragraph text. | |
| 328 | ||
| 329 | <div class="bd-example"> | |
| 330 | Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. | |
| 331 | </div> | |
| 332 | ||
| 333 | ### Summary | |
| 334 | ||
| 335 | The 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. | |
| 336 | ||
| 337 | <div class="bd-example"> | |
| 338 | <details> | |
| 339 | <summary>Some details</summary> | |
| 340 | <p>More info about the details.</p> | |
| 341 | </details> | |
| 342 | ||
| 343 | <details open> | |
| 344 | <summary>Even more details</summary> | |
| 345 | <p>Here are even more details about the details.</p> | |
| 346 | </details> | |
| 347 | </div> | |
| 348 | ||
| 349 | ## HTML5 `[hidden]` attribute | |
| 350 | ||
| 351 | HTML5 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. | |
| 352 | ||
| 353 | {% highlight html %} | |
| 354 | <input type="text" hidden> | |
| 355 | {% endhighlight %} | |
| 356 | ||
| 357 | {% capture callout %} | |
| 358 | ##### jQuery incompatibility | |
| 359 | ||
| 360 | `[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. | |
| 361 | {% endcapture %} | |
| 362 | {% include callout.html content=callout type="warning" %} | |
| 363 | ||
| 364 | 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. | |
