| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Typography | |
| 4 | description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. | |
| 5 | group: content | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | ## Global settings | |
| 10 | ||
| 11 | Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/). | |
| 12 | ||
| 13 | - Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. | |
| 14 | - 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. | |
| 15 | - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`. | |
| 16 | - Set the global link color via `$link-color` and apply link underlines only on `:hover`. | |
| 17 | - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default). | |
| 18 | ||
| 19 | These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. | |
| 20 | ||
| 21 | ## Headings | |
| 22 | ||
| 23 | All HTML headings, `<h1>` through `<h6>`, are available. | |
| 24 | ||
| 25 | <table> | |
| 26 | <thead> | |
| 27 | <tr> | |
| 28 | <th>Heading</th> | |
| 29 | <th>Example</th> | |
| 30 | </tr> | |
| 31 | </thead> | |
| 32 | <tbody> | |
| 33 | <tr> | |
| 34 | <td> | |
| 35 | {{ "`<h1></h1>`" | markdownify }} | |
| 36 | </td> | |
| 37 | <td><span class="h1">h1. Bootstrap heading</span></td> | |
| 38 | </tr> | |
| 39 | <tr> | |
| 40 | <td> | |
| 41 | {{ "`<h2></h2>`" | markdownify }} | |
| 42 | </td> | |
| 43 | <td><span class="h2">h2. Bootstrap heading</span></td> | |
| 44 | </tr> | |
| 45 | <tr> | |
| 46 | <td> | |
| 47 | {{ "`<h3></h3>`" | markdownify }} | |
| 48 | </td> | |
| 49 | <td><span class="h3">h3. Bootstrap heading</span></td> | |
| 50 | </tr> | |
| 51 | <tr> | |
| 52 | <td> | |
| 53 | {{ "`<h4></h4>`" | markdownify }} | |
| 54 | </td> | |
| 55 | <td><span class="h4">h4. Bootstrap heading</span></td> | |
| 56 | </tr> | |
| 57 | <tr> | |
| 58 | <td> | |
| 59 | {{ "`<h5></h5>`" | markdownify }} | |
| 60 | </td> | |
| 61 | <td><span class="h5">h5. Bootstrap heading</span></td> | |
| 62 | </tr> | |
| 63 | <tr> | |
| 64 | <td> | |
| 65 | {{ "`<h6></h6>`" | markdownify }} | |
| 66 | </td> | |
| 67 | <td><span class="h6">h6. Bootstrap heading</span></td> | |
| 68 | </tr> | |
| 69 | </tbody> | |
| 70 | </table> | |
| 71 | ||
| 72 | {% highlight html %} | |
| 73 | <h1>h1. Bootstrap heading</h1> | |
| 74 | <h2>h2. Bootstrap heading</h2> | |
| 75 | <h3>h3. Bootstrap heading</h3> | |
| 76 | <h4>h4. Bootstrap heading</h4> | |
| 77 | <h5>h5. Bootstrap heading</h5> | |
| 78 | <h6>h6. Bootstrap heading</h6> | |
| 79 | {% endhighlight %} | |
| 80 | ||
| 81 | `.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. | |
| 82 | ||
| 83 | {% capture example %} | |
| 84 | <p class="h1">h1. Bootstrap heading</p> | |
| 85 | <p class="h2">h2. Bootstrap heading</p> | |
| 86 | <p class="h3">h3. Bootstrap heading</p> | |
| 87 | <p class="h4">h4. Bootstrap heading</p> | |
| 88 | <p class="h5">h5. Bootstrap heading</p> | |
| 89 | <p class="h6">h6. Bootstrap heading</p> | |
| 90 | {% endcapture %} | |
| 91 | {% include example.html content=example %} | |
| 92 | ||
| 93 | ### Customizing headings | |
| 94 | ||
| 95 | Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. | |
| 96 | ||
| 97 | {% capture example %} | |
| 98 | <h3> | |
| 99 | Fancy display heading | |
| 100 | <small class="text-muted">With faded secondary text</small> | |
| 101 | </h3> | |
| 102 | {% endcapture %} | |
| 103 | {% include example.html content=example %} | |
| 104 | ||
| 105 | ## Display headings | |
| 106 | ||
| 107 | 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. | |
| 108 | ||
| 109 | <div class="bd-example bd-example-type"> | |
| 110 | <table class="table"> | |
| 111 | <tbody> | |
| 112 | <tr> | |
| 113 | <td><span class="display-1">Display 1</span></td> | |
| 114 | </tr> | |
| 115 | <tr> | |
| 116 | <td><span class="display-2">Display 2</span></td> | |
| 117 | </tr> | |
| 118 | <tr> | |
| 119 | <td><span class="display-3">Display 3</span></td> | |
| 120 | </tr> | |
| 121 | <tr> | |
| 122 | <td><span class="display-4">Display 4</span></td> | |
| 123 | </tr> | |
| 124 | </tbody> | |
| 125 | </table> | |
| 126 | </div> | |
| 127 | ||
| 128 | {% highlight html %} | |
| 129 | <h1 class="display-1">Display 1</h1> | |
| 130 | <h1 class="display-2">Display 2</h1> | |
| 131 | <h1 class="display-3">Display 3</h1> | |
| 132 | <h1 class="display-4">Display 4</h1> | |
| 133 | {% endhighlight %} | |
| 134 | ||
| 135 | ## Lead | |
| 136 | ||
| 137 | Make a paragraph stand out by adding `.lead`. | |
| 138 | ||
| 139 | {% capture example %} | |
| 140 | <p class="lead"> | |
| 141 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. | |
| 142 | </p> | |
| 143 | {% endcapture %} | |
| 144 | {% include example.html content=example %} | |
| 145 | ||
| 146 | ## Inline text elements | |
| 147 | ||
| 148 | Styling for common inline HTML5 elements. | |
| 149 | ||
| 150 | {% capture example %} | |
| 151 | <p>You can use the mark tag to <mark>highlight</mark> text.</p> | |
| 152 | <p><del>This line of text is meant to be treated as deleted text.</del></p> | |
| 153 | <p><s>This line of text is meant to be treated as no longer accurate.</s></p> | |
| 154 | <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> | |
| 155 | <p><u>This line of text will render as underlined</u></p> | |
| 156 | <p><small>This line of text is meant to be treated as fine print.</small></p> | |
| 157 | <p><strong>This line rendered as bold text.</strong></p> | |
| 158 | <p><em>This line rendered as italicized text.</em></p> | |
| 159 | {% endcapture %} | |
| 160 | {% include example.html content=example %} | |
| 161 | ||
| 162 | `.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. | |
| 163 | ||
| 164 | 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. | |
| 165 | ||
| 166 | ## Text utilities | |
| 167 | ||
| 168 | Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/) and [color utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/). | |
| 169 | ||
| 170 | ## Abbreviations | |
| 171 | ||
| 172 | Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. | |
| 173 | ||
| 174 | Add `.initialism` to an abbreviation for a slightly smaller font-size. | |
| 175 | ||
| 176 | {% capture example %} | |
| 177 | <p><abbr title="attribute">attr</abbr></p> | |
| 178 | <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> | |
| 179 | {% endcapture %} | |
| 180 | {% include example.html content=example %} | |
| 181 | ||
| 182 | ## Blockquotes | |
| 183 | ||
| 184 | 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. | |
| 185 | ||
| 186 | {% capture example %} | |
| 187 | <blockquote class="blockquote"> | |
| 188 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| 189 | </blockquote> | |
| 190 | {% endcapture %} | |
| 191 | {% include example.html content=example %} | |
| 192 | ||
| 193 | ### Naming a source | |
| 194 | ||
| 195 | Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`. | |
| 196 | ||
| 197 | {% capture example %} | |
| 198 | <blockquote class="blockquote"> | |
| 199 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| 200 | <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
| 201 | </blockquote> | |
| 202 | {% endcapture %} | |
| 203 | {% include example.html content=example %} | |
| 204 | ||
| 205 | ### Alignment | |
| 206 | ||
| 207 | Use text utilities as needed to change the alignment of your blockquote. | |
| 208 | ||
| 209 | {% capture example %} | |
| 210 | <blockquote class="blockquote text-center"> | |
| 211 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| 212 | <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
| 213 | </blockquote> | |
| 214 | {% endcapture %} | |
| 215 | {% include example.html content=example %} | |
| 216 | ||
| 217 | {% capture example %} | |
| 218 | <blockquote class="blockquote text-right"> | |
| 219 | <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
| 220 | <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
| 221 | </blockquote> | |
| 222 | {% endcapture %} | |
| 223 | {% include example.html content=example %} | |
| 224 | ||
| 225 | ## Lists | |
| 226 | ||
| 227 | ### Unstyled | |
| 228 | ||
| 229 | 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. | |
| 230 | ||
| 231 | {% capture example %} | |
| 232 | <ul class="list-unstyled"> | |
| 233 | <li>Lorem ipsum dolor sit amet</li> | |
| 234 | <li>Consectetur adipiscing elit</li> | |
| 235 | <li>Integer molestie lorem at massa</li> | |
| 236 | <li>Facilisis in pretium nisl aliquet</li> | |
| 237 | <li>Nulla volutpat aliquam velit | |
| 238 | <ul> | |
| 239 | <li>Phasellus iaculis neque</li> | |
| 240 | <li>Purus sodales ultricies</li> | |
| 241 | <li>Vestibulum laoreet porttitor sem</li> | |
| 242 | <li>Ac tristique libero volutpat at</li> | |
| 243 | </ul> | |
| 244 | </li> | |
| 245 | <li>Faucibus porta lacus fringilla vel</li> | |
| 246 | <li>Aenean sit amet erat nunc</li> | |
| 247 | <li>Eget porttitor lorem</li> | |
| 248 | </ul> | |
| 249 | {% endcapture %} | |
| 250 | {% include example.html content=example %} | |
| 251 | ||
| 252 | ### Inline | |
| 253 | ||
| 254 | Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. | |
| 255 | ||
| 256 | {% capture example %} | |
| 257 | <ul class="list-inline"> | |
| 258 | <li class="list-inline-item">Lorem ipsum</li> | |
| 259 | <li class="list-inline-item">Phasellus iaculis</li> | |
| 260 | <li class="list-inline-item">Nulla volutpat</li> | |
| 261 | </ul> | |
| 262 | {% endcapture %} | |
| 263 | {% include example.html content=example %} | |
| 264 | ||
| 265 | ### Description list alignment | |
| 266 | ||
| 267 | 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. | |
| 268 | ||
| 269 | {% capture example %} | |
| 270 | <dl class="row"> | |
| 271 | <dt class="col-sm-3">Description lists</dt> | |
| 272 | <dd class="col-sm-9">A description list is perfect for defining terms.</dd> | |
| 273 | ||
| 274 | <dt class="col-sm-3">Euismod</dt> | |
| 275 | <dd class="col-sm-9"> | |
| 276 | <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> | |
| 277 | <p>Donec id elit non mi porta gravida at eget metus.</p> | |
| 278 | </dd> | |
| 279 | ||
| 280 | <dt class="col-sm-3">Malesuada porta</dt> | |
| 281 | <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> | |
| 282 | ||
| 283 | <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> | |
| 284 | <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> | |
| 285 | ||
| 286 | <dt class="col-sm-3">Nesting</dt> | |
| 287 | <dd class="col-sm-9"> | |
| 288 | <dl class="row"> | |
| 289 | <dt class="col-sm-4">Nested definition list</dt> | |
| 290 | <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> | |
| 291 | </dl> | |
| 292 | </dd> | |
| 293 | </dl> | |
| 294 | {% endcapture %} | |
| 295 | {% include example.html content=example %} | |
| 296 | ||
| 297 | ## Responsive typography | |
| 298 | ||
| 299 | *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. | |
| 300 | ||
| 301 | Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish. | |
| 302 | ||
| 303 | {% highlight scss %} | |
| 304 | html { | |
| 305 | font-size: 1rem; | |
| 306 | } | |
| 307 | ||
| 308 | @include media-breakpoint-up(sm) { | |
| 309 | html { | |
| 310 | font-size: 1.2rem; | |
| 311 | } | |
| 312 | } | |
| 313 | ||
| 314 | @include media-breakpoint-up(md) { | |
| 315 | html { | |
| 316 | font-size: 1.4rem; | |
| 317 | } | |
| 318 | } | |
| 319 | ||
| 320 | @include media-breakpoint-up(lg) { | |
| 321 | html { | |
| 322 | font-size: 1.6rem; | |
| 323 | } | |
| 324 | } | |
| 325 | {% endhighlight %} | |
