]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Typography | |
4 | description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more. | |
5 | group: content | |
6 | --- | |
7 | ||
8 | Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/typography/). | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## Global settings | |
16 | ||
17 | Bootstrap sets basic global display, typography, and link styles. Specifically, we: | |
18 | ||
19 | - Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. | |
20 | - For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. | |
21 | - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`. | |
22 | - Set the global link color via `$link-color` and apply link underlines only on `:hover`. | |
23 | - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default). | |
24 | ||
25 | These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. | |
26 | ||
27 | ## Headings | |
28 | ||
29 | All HTML headings, `<h1>` through `<h6>`, are available. | |
30 | ||
31 | <div class="bd-example bd-example-type"> | |
32 | <table class="table"> | |
33 | <tbody> | |
34 | <tr> | |
35 | <td><h1>h1. Bootstrap heading</h1></td> | |
36 | <td class="type-info">Semibold 2.5rem (40px)</td> | |
37 | </tr> | |
38 | <tr> | |
39 | <td><h2>h2. Bootstrap heading</h2></td> | |
40 | <td class="type-info">Semibold 2rem (32px)</td> | |
41 | </tr> | |
42 | <tr> | |
43 | <td><h3>h3. Bootstrap heading</h3></td> | |
44 | <td class="type-info">Semibold 1.75rem (28px)</td> | |
45 | </tr> | |
46 | <tr> | |
47 | <td><h4>h4. Bootstrap heading</h4></td> | |
48 | <td class="type-info">Semibold 1.5rem (24px)</td> | |
49 | </tr> | |
50 | <tr> | |
51 | <td><h5>h5. Bootstrap heading</h5></td> | |
52 | <td class="type-info">Semibold 1.25rem (20px)</td> | |
53 | </tr> | |
54 | <tr> | |
55 | <td><h6>h6. Bootstrap heading</h6></td> | |
56 | <td class="type-info">Semibold 1rem (16px)</td> | |
57 | </tr> | |
58 | </tbody> | |
59 | </table> | |
60 | </div> | |
61 | ||
62 | {% highlight html %} | |
63 | <h1>h1. Bootstrap heading</h1> | |
64 | <h2>h2. Bootstrap heading</h2> | |
65 | <h3>h3. Bootstrap heading</h3> | |
66 | <h4>h4. Bootstrap heading</h4> | |
67 | <h5>h5. Bootstrap heading</h5> | |
68 | <h6>h6. Bootstrap heading</h6> | |
69 | {% endhighlight %} | |
70 | ||
71 | `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. | |
72 | ||
73 | {% example html %} | |
74 | <p class="h1">h1. Bootstrap heading</p> | |
75 | <p class="h2">h2. Bootstrap heading</p> | |
76 | <p class="h3">h3. Bootstrap heading</p> | |
77 | <p class="h4">h4. Bootstrap heading</p> | |
78 | <p class="h5">h5. Bootstrap heading</p> | |
79 | <p class="h6">h6. Bootstrap heading</p> | |
80 | {% endexample %} | |
81 | ||
82 | ### Customizing headings | |
83 | ||
84 | Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. | |
85 | ||
86 | {% example html %} | |
87 | <h3> | |
88 | Fancy display heading | |
89 | <small class="text-muted">With faded secondary text</small> | |
90 | </h3> | |
91 | {% endexample %} | |
92 | ||
93 | ## Display headings | |
94 | ||
95 | Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. | |
96 | ||
97 | <div class="bd-example bd-example-type"> | |
98 | <table class="table"> | |
99 | <tbody> | |
100 | <tr> | |
101 | <td><h1 class="display-1">Display 1</h1></td> | |
102 | </tr> | |
103 | <tr> | |
104 | <td><h1 class="display-2">Display 2</h1></td> | |
105 | </tr> | |
106 | <tr> | |
107 | <td><h1 class="display-3">Display 3</h1></td> | |
108 | </tr> | |
109 | <tr> | |
110 | <td><h1 class="display-4">Display 4</h1></td> | |
111 | </tr> | |
112 | </tbody> | |
113 | </table> | |
114 | </div> | |
115 | ||
116 | {% highlight html %} | |
117 | <h1 class="display-1">Display 1</h1> | |
118 | <h1 class="display-2">Display 2</h1> | |
119 | <h1 class="display-3">Display 3</h1> | |
120 | <h1 class="display-4">Display 4</h1> | |
121 | {% endhighlight %} | |
122 | ||
123 | ## Lead | |
124 | ||
125 | Make a paragraph stand out by adding `.lead`. | |
126 | ||
127 | {% example html %} | |
128 | <p class="lead"> | |
129 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. | |
130 | </p> | |
131 | {% endexample %} | |
132 | ||
133 | ## Inline text elements | |
134 | ||
135 | Styling for common inline HTML5 elements. | |
136 | ||
137 | {% example html %} | |
138 | <p>You can use the mark tag to <mark>highlight</mark> text.</p> | |
139 | <p><del>This line of text is meant to be treated as deleted text.</del></p> | |
140 | <p><s>This line of text is meant to be treated as no longer accurate.</s></p> | |
141 | <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> | |
142 | <p><u>This line of text will render as underlined</u></p> | |
143 | <p><small>This line of text is meant to be treated as fine print.</small></p> | |
144 | <p><strong>This line rendered as bold text.</strong></p> | |
145 | <p><em>This line rendered as italicized text.</em></p> | |
146 | {% endexample %} | |
147 | ||
148 | `.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring. | |
149 | ||
150 | While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc. | |
151 | ||
152 | ## Text utilities | |
153 | ||
154 | Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment). | |
155 | ||
156 | ## Abbreviations | |
157 | ||
158 | Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline from Normalize.css and gain a help cursor to provide additional context on hover and to users of assistive technologies. | |
159 | ||
160 | Add `.initialism` to an abbreviation for a slightly smaller font-size. | |
161 | ||
162 | {% example html %} | |
163 | <p><abbr title="attribute">attr</abbr></p> | |
164 | <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> | |
165 | {% endexample %} | |
166 | ||
167 | ## Blockquotes | |
168 | ||
169 | For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. | |
170 | ||
171 | {% example html %} | |
172 | <blockquote class="blockquote"> | |
173 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
174 | </blockquote> | |
175 | {% endexample %} | |
176 | ||
177 | ### Naming a source | |
178 | ||
179 | Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`. | |
180 | ||
181 | {% example html %} | |
182 | <blockquote class="blockquote"> | |
183 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
184 | <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
185 | </blockquote> | |
186 | {% endexample %} | |
187 | ||
188 | ### Reverse layout | |
189 | ||
190 | Add `.blockquote-reverse` for a blockquote with right-aligned content. | |
191 | ||
192 | {% example html %} | |
193 | <blockquote class="blockquote blockquote-reverse"> | |
194 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
195 | <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
196 | </blockquote> | |
197 | {% endexample %} | |
198 | ||
199 | ## Lists | |
200 | ||
201 | ### Unstyled | |
202 | ||
203 | Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well. | |
204 | ||
205 | {% example html %} | |
206 | <ul class="list-unstyled"> | |
207 | <li>Lorem ipsum dolor sit amet</li> | |
208 | <li>Consectetur adipiscing elit</li> | |
209 | <li>Integer molestie lorem at massa</li> | |
210 | <li>Facilisis in pretium nisl aliquet</li> | |
211 | <li>Nulla volutpat aliquam velit | |
212 | <ul> | |
213 | <li>Phasellus iaculis neque</li> | |
214 | <li>Purus sodales ultricies</li> | |
215 | <li>Vestibulum laoreet porttitor sem</li> | |
216 | <li>Ac tristique libero volutpat at</li> | |
217 | </ul> | |
218 | </li> | |
219 | <li>Faucibus porta lacus fringilla vel</li> | |
220 | <li>Aenean sit amet erat nunc</li> | |
221 | <li>Eget porttitor lorem</li> | |
222 | </ul> | |
223 | {% endexample %} | |
224 | ||
225 | ### Inline | |
226 | ||
227 | Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. | |
228 | ||
229 | {% example html %} | |
230 | <ul class="list-inline"> | |
231 | <li class="list-inline-item">Lorem ipsum</li> | |
232 | <li class="list-inline-item">Phasellus iaculis</li> | |
233 | <li class="list-inline-item">Nulla volutpat</li> | |
234 | </ul> | |
235 | {% endexample %} | |
236 | ||
237 | ### Description list alignment | |
238 | ||
239 | Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis. | |
240 | ||
241 | {% example html %} | |
242 | <dl class="row"> | |
243 | <dt class="col-sm-3">Description lists</dt> | |
244 | <dd class="col-sm-9">A description list is perfect for defining terms.</dd> | |
245 | ||
246 | <dt class="col-sm-3">Euismod</dt> | |
247 | <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> | |
248 | <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd> | |
249 | ||
250 | <dt class="col-sm-3">Malesuada porta</dt> | |
251 | <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> | |
252 | ||
253 | <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> | |
254 | <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> | |
255 | ||
256 | <dt class="col-sm-3">Nesting</dt> | |
257 | <dd class="col-sm-9"> | |
258 | <dl class="row"> | |
259 | <dt class="col-sm-4">Nested definition list</dt> | |
260 | <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> | |
261 | </dl> | |
262 | </dd> | |
263 | </dl> | |
264 | {% endexample %} | |
265 | ||
266 | ## Responsive typography | |
267 | ||
268 | *Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it. | |
269 | ||
270 | Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish. | |
271 | ||
272 | {% highlight scss %} | |
273 | html { | |
274 | font-size: 14px; | |
275 | } | |
276 | ||
277 | @include media-breakpoint-up(sm) { | |
278 | html { | |
279 | font-size: 16px; | |
280 | } | |
281 | } | |
282 | ||
283 | @include media-breakpoint-up(md) { | |
284 | html { | |
285 | font-size: 20px; | |
286 | } | |
287 | } | |
288 | ||
289 | @include media-breakpoint-up(lg) { | |
290 | html { | |
291 | font-size: 28px; | |
292 | } | |
293 | } | |
294 | {% endhighlight %} |