| 1 |
efrain |
1 |
---
|
|
|
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 |
aliases: "/docs/4.6/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 |
```scss
|
|
|
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,
|
|
|
46 |
// Linux
|
|
|
47 |
"Noto Sans",
|
|
|
48 |
"Liberation Sans",
|
|
|
49 |
// Sans serif fallback
|
|
|
50 |
sans-serif,
|
|
|
51 |
// Emoji fonts
|
|
|
52 |
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
|
|
53 |
```
|
|
|
54 |
|
|
|
55 |
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.
|
|
|
56 |
|
|
|
57 |
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.
|
|
|
58 |
|
|
|
59 |
## Headings and paragraphs
|
|
|
60 |
|
|
|
61 |
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.
|
|
|
62 |
|
|
|
63 |
<table>
|
|
|
64 |
<thead>
|
|
|
65 |
<tr>
|
|
|
66 |
<th>Heading</th>
|
|
|
67 |
<th>Example</th>
|
|
|
68 |
</tr>
|
|
|
69 |
</thead>
|
|
|
70 |
<tbody>
|
|
|
71 |
<tr>
|
|
|
72 |
<td>
|
|
|
73 |
{{< markdown >}}`<h1></h1>`{{< /markdown >}}
|
|
|
74 |
</td>
|
|
|
75 |
<td><span class="h1">h1. Bootstrap heading</span></td>
|
|
|
76 |
</tr>
|
|
|
77 |
<tr>
|
|
|
78 |
<td>
|
|
|
79 |
{{< markdown >}}`<h2></h2>`{{< /markdown >}}
|
|
|
80 |
</td>
|
|
|
81 |
<td><span class="h2">h2. Bootstrap heading</span></td>
|
|
|
82 |
</tr>
|
|
|
83 |
<tr>
|
|
|
84 |
<td>
|
|
|
85 |
{{< markdown >}}`<h3></h3>`{{< /markdown >}}
|
|
|
86 |
</td>
|
|
|
87 |
<td><span class="h3">h3. Bootstrap heading</span></td>
|
|
|
88 |
</tr>
|
|
|
89 |
<tr>
|
|
|
90 |
<td>
|
|
|
91 |
{{< markdown >}}`<h4></h4>`{{< /markdown >}}
|
|
|
92 |
</td>
|
|
|
93 |
<td><span class="h4">h4. Bootstrap heading</span></td>
|
|
|
94 |
</tr>
|
|
|
95 |
<tr>
|
|
|
96 |
<td>
|
|
|
97 |
{{< markdown >}}`<h5></h5>`{{< /markdown >}}
|
|
|
98 |
</td>
|
|
|
99 |
<td><span class="h5">h5. Bootstrap heading</span></td>
|
|
|
100 |
</tr>
|
|
|
101 |
<tr>
|
|
|
102 |
<td>
|
|
|
103 |
{{< markdown >}}`<h6></h6>`{{< /markdown >}}
|
|
|
104 |
</td>
|
|
|
105 |
<td><span class="h6">h6. Bootstrap heading</span></td>
|
|
|
106 |
</tr>
|
|
|
107 |
</tbody>
|
|
|
108 |
</table>
|
|
|
109 |
|
|
|
110 |
## Lists
|
|
|
111 |
|
|
|
112 |
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
|
|
|
113 |
|
|
|
114 |
<div class="bd-example">
|
|
|
115 |
{{< markdown >}}
|
|
|
116 |
* All lists have their top margin removed
|
|
|
117 |
* And their bottom margin normalized
|
|
|
118 |
* Nested lists have no bottom margin
|
|
|
119 |
* This way they have a more even appearance
|
|
|
120 |
* Particularly when followed by more list items
|
|
|
121 |
* The left padding has also been reset
|
|
|
122 |
|
|
|
123 |
1. Here's an ordered list
|
|
|
124 |
2. With a few list items
|
|
|
125 |
3. It has the same overall look
|
|
|
126 |
4. As the previous unordered list
|
|
|
127 |
{{< /markdown >}}
|
|
|
128 |
</div>
|
|
|
129 |
|
|
|
130 |
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**.
|
|
|
131 |
|
|
|
132 |
<div class="bd-example">
|
|
|
133 |
<dl>
|
|
|
134 |
<dt>Description lists</dt>
|
|
|
135 |
<dd>A description list is perfect for defining terms.</dd>
|
|
|
136 |
<dt>Term</dt>
|
|
|
137 |
<dd>Definition for the term.</dd>
|
|
|
138 |
<dd>A second definition for the same term.</dd>
|
|
|
139 |
<dt>Another term</dt>
|
|
|
140 |
<dd>Definition for this other term.</dd>
|
|
|
141 |
</dl>
|
|
|
142 |
</div>
|
|
|
143 |
|
|
|
144 |
## Preformatted text
|
|
|
145 |
|
|
|
146 |
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
|
|
147 |
|
|
|
148 |
<div class="bd-example">
|
|
|
149 |
<pre>
|
|
|
150 |
.example-element {
|
|
|
151 |
margin-bottom: 1rem;
|
|
|
152 |
}
|
|
|
153 |
</pre>
|
|
|
154 |
</div>
|
|
|
155 |
|
|
|
156 |
## Tables
|
|
|
157 |
|
|
|
158 |
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]({{< docsref "/content/tables" >}}).
|
|
|
159 |
|
|
|
160 |
<div class="bd-example">
|
|
|
161 |
<table>
|
|
|
162 |
<caption>
|
|
|
163 |
This is an example table, and this is its caption to describe the contents.
|
|
|
164 |
</caption>
|
|
|
165 |
<thead>
|
|
|
166 |
<tr>
|
|
|
167 |
<th>Table heading</th>
|
|
|
168 |
<th>Table heading</th>
|
|
|
169 |
<th>Table heading</th>
|
|
|
170 |
<th>Table heading</th>
|
|
|
171 |
</tr>
|
|
|
172 |
</thead>
|
|
|
173 |
<tbody>
|
|
|
174 |
<tr>
|
|
|
175 |
<td>Table cell</td>
|
|
|
176 |
<td>Table cell</td>
|
|
|
177 |
<td>Table cell</td>
|
|
|
178 |
<td>Table cell</td>
|
|
|
179 |
</tr>
|
|
|
180 |
<tr>
|
|
|
181 |
<td>Table cell</td>
|
|
|
182 |
<td>Table cell</td>
|
|
|
183 |
<td>Table cell</td>
|
|
|
184 |
<td>Table cell</td>
|
|
|
185 |
</tr>
|
|
|
186 |
<tr>
|
|
|
187 |
<td>Table cell</td>
|
|
|
188 |
<td>Table cell</td>
|
|
|
189 |
<td>Table cell</td>
|
|
|
190 |
<td>Table cell</td>
|
|
|
191 |
</tr>
|
|
|
192 |
</tbody>
|
|
|
193 |
</table>
|
|
|
194 |
</div>
|
|
|
195 |
|
|
|
196 |
## Forms
|
|
|
197 |
|
|
|
198 |
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
|
|
|
199 |
|
|
|
200 |
- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
|
|
|
201 |
- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
|
|
|
202 |
- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
|
|
|
203 |
- `<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.
|
|
|
204 |
- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
|
|
|
205 |
- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.
|
|
|
206 |
|
|
|
207 |
These changes, and more, are demonstrated below.
|
|
|
208 |
|
|
|
209 |
<form class="bd-example">
|
|
|
210 |
<fieldset>
|
|
|
211 |
<legend>Example legend</legend>
|
|
|
212 |
<p>
|
|
|
213 |
<label for="input">Example input</label>
|
|
|
214 |
<input type="text" id="input" placeholder="Example input">
|
|
|
215 |
</p>
|
|
|
216 |
<p>
|
|
|
217 |
<label for="select">Example select</label>
|
|
|
218 |
<select id="select">
|
|
|
219 |
<option value="">Choose...</option>
|
|
|
220 |
<optgroup label="Option group 1">
|
|
|
221 |
<option value="">Option 1</option>
|
|
|
222 |
<option value="">Option 2</option>
|
|
|
223 |
<option value="">Option 3</option>
|
|
|
224 |
</optgroup>
|
|
|
225 |
<optgroup label="Option group 2">
|
|
|
226 |
<option value="">Option 4</option>
|
|
|
227 |
<option value="">Option 5</option>
|
|
|
228 |
<option value="">Option 6</option>
|
|
|
229 |
</optgroup>
|
|
|
230 |
</select>
|
|
|
231 |
</p>
|
|
|
232 |
<p>
|
|
|
233 |
<label>
|
|
|
234 |
<input type="checkbox" value="">
|
|
|
235 |
Check this checkbox
|
|
|
236 |
</label>
|
|
|
237 |
</p>
|
|
|
238 |
<p>
|
|
|
239 |
<label>
|
|
|
240 |
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
|
|
241 |
Option one is this and that
|
|
|
242 |
</label>
|
|
|
243 |
<label>
|
|
|
244 |
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
|
|
245 |
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
|
|
|
246 |
</label>
|
|
|
247 |
<label>
|
|
|
248 |
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
|
|
249 |
Option three is disabled
|
|
|
250 |
</label>
|
|
|
251 |
</p>
|
|
|
252 |
<p>
|
|
|
253 |
<label for="textarea">Example textarea</label>
|
|
|
254 |
<textarea id="textarea" rows="3"></textarea>
|
|
|
255 |
</p>
|
|
|
256 |
<p>
|
|
|
257 |
<label for="date">Example date</label>
|
|
|
258 |
<input type="date" id="date">
|
|
|
259 |
</p>
|
|
|
260 |
<p>
|
|
|
261 |
<label for="time">Example time</label>
|
|
|
262 |
<input type="time" id="time">
|
|
|
263 |
</p>
|
|
|
264 |
<p>
|
|
|
265 |
<label for="output">Example output</label>
|
|
|
266 |
<output name="result" id="output">100</output>
|
|
|
267 |
</p>
|
|
|
268 |
<p>
|
|
|
269 |
<button type="submit">Button submit</button>
|
|
|
270 |
<input type="submit" value="Input submit button">
|
|
|
271 |
<input type="reset" value="Input reset button">
|
|
|
272 |
<input type="button" value="Input button">
|
|
|
273 |
</p>
|
|
|
274 |
<p>
|
|
|
275 |
<button type="submit" disabled>Button submit</button>
|
|
|
276 |
<input type="submit" value="Input submit button" disabled>
|
|
|
277 |
<input type="reset" value="Input reset button" disabled>
|
|
|
278 |
<input type="button" value="Input button" disabled>
|
|
|
279 |
</p>
|
|
|
280 |
</fieldset>
|
|
|
281 |
</form>
|
|
|
282 |
|
|
|
283 |
### Pointers on buttons
|
|
|
284 |
|
|
|
285 |
Reboot 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.
|
|
|
286 |
|
|
|
287 |
{{< example >}}
|
|
|
288 |
<span role="button" tabindex="0">Non-button element button</span>
|
|
|
289 |
{{< /example >}}
|
|
|
290 |
|
|
|
291 |
## Misc elements
|
|
|
292 |
|
|
|
293 |
### Address
|
|
|
294 |
|
|
|
295 |
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>`.
|
|
|
296 |
|
|
|
297 |
<div class="bd-example">
|
|
|
298 |
<address>
|
|
|
299 |
<strong>Twitter, Inc.</strong><br>
|
|
|
300 |
1355 Market St, Suite 900<br>
|
|
|
301 |
San Francisco, CA 94103<br>
|
|
|
302 |
<abbr title="Phone">P:</abbr> (123) 456-7890
|
|
|
303 |
</address>
|
|
|
304 |
|
|
|
305 |
<address>
|
|
|
306 |
<strong>Full Name</strong><br>
|
|
|
307 |
<a href="mailto:first.last@example.com">first.last@example.com</a>
|
|
|
308 |
</address>
|
|
|
309 |
</div>
|
|
|
310 |
|
|
|
311 |
### Blockquote
|
|
|
312 |
|
|
|
313 |
The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
|
|
|
314 |
|
|
|
315 |
<div class="bd-example">
|
|
|
316 |
<blockquote class="blockquote">
|
|
|
317 |
<p>A well-known quote, contained in a blockquote element.</p>
|
|
|
318 |
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
|
319 |
</blockquote>
|
|
|
320 |
</div>
|
|
|
321 |
|
|
|
322 |
### Inline elements
|
|
|
323 |
|
|
|
324 |
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
|
|
|
325 |
|
|
|
326 |
<div class="bd-example">
|
|
|
327 |
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
|
|
|
328 |
</div>
|
|
|
329 |
|
|
|
330 |
### Summary
|
|
|
331 |
|
|
|
332 |
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.
|
|
|
333 |
|
|
|
334 |
<div class="bd-example">
|
|
|
335 |
<details>
|
|
|
336 |
<summary>Some details</summary>
|
|
|
337 |
<p>More info about the details.</p>
|
|
|
338 |
</details>
|
|
|
339 |
|
|
|
340 |
<details open>
|
|
|
341 |
<summary>Even more details</summary>
|
|
|
342 |
<p>Here are even more details about the details.</p>
|
|
|
343 |
</details>
|
|
|
344 |
</div>
|
|
|
345 |
|
|
|
346 |
## HTML5 `[hidden]` attribute
|
|
|
347 |
|
|
|
348 |
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.
|
|
|
349 |
|
|
|
350 |
```html
|
|
|
351 |
<input type="text" hidden>
|
|
|
352 |
```
|
|
|
353 |
|
|
|
354 |
{{< callout warning >}}
|
|
|
355 |
##### jQuery incompatibility
|
|
|
356 |
|
|
|
357 |
`[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.
|
|
|
358 |
{{< /callout >}}
|
|
|
359 |
|
|
|
360 |
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.
|