Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Headings

All HTML headings, <h1> through <h6>, are available. @outputclass="h1" through @outputclass="h6" are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<title outputclass="h1">h1. Bootstrap heading</title>
<title outputclass="h2">h2. Bootstrap heading</title>
<title outputclass="h3">h3. Bootstrap heading</title>
<title outputclass="h4">h4. Bootstrap heading</title>
<title outputclass="h5">h5. Bootstrap heading</title>
<title outputclass="h6">h6. Bootstrap heading</title>

Customizing headings

Annotate a <ph> with an @outputclass to recreate the small secondary heading text from Bootstrap 3.

<title>Fancy display heading <ph outputclass="small text-body-secondary">with faded secondary text</ph></title>

Display headings

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.

<title outputclass="display-1">Display 1</title>
<title outputclass="display-2">Display 2</title>
<title outputclass="display-3">Display 3</title>
<title outputclass="display-4">Display 4</title>
<title outputclass="display-5">Display 5</title>
<title outputclass="display-6">Display 6</title>

Lead

Make a paragraph stand out by adding @outputclass="lead" — this is automatically added to <shortdesc> elements.

<p outputclass="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inline text elements

Styling for common inline HTML5 elements.

<p>You can use <xmlatt>outputclass="mark"</xmlatt> to <ph outputclass="mark">highlight</ph> text.</p>
<p><line-through>This line of text is meant to be treated as deleted
  text.</line-through></p>
<p><u>This line of text will render as underlined.</u></p>
<p outputclass="small">This line of text using <xmlatt>outputclass="small"</xmlatt>
  is meant to be treated as fine print.</p>
<p><b>This line rendered as bold text.</b></p>
<p><i>This line rendered as italicized text.</i></p>

Text utilities

Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s text and color utilities.

Abbreviations

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.

Add @outputclass="initialism" to an abbreviation for a slightly smaller font-size.

<p>
  <ph outputclass="abbreviation" otherprops="title(attribute)">attr</ph>
</p>
<p>
  <ph outputclass="initialism" otherprops="title(HyperText Markup Language)">HTML</ph>
</p>
  

Blockquotes

For quoting blocks of content from another source within your document, use the DITA <lq> element, it is styled automatically.

<lq>
  <p>A well-known quote, contained in a blockquote element.</p>
</lq>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the rendered HTML <blockquote> element. When providing attribution, wrap your the DITA <lq> in a <fig> and add a <title> to the <fig>. Be sure to wrap the name of the source work in the <cite> as well.

<fig>
  <title>Someone famous in <cite>Source Title</cite></title>
  <lq >
    <p>A well-known quote, contained in a blockquote element.</p>
  </lq>
</fig>

Alignment

Use text utilities such as @outputclass="text-center" as needed to change the alignment of your blockquote.

<fig outputclass="text-center">
  <title>Someone famous in <cite>Source Title</cite></title>
  <lq>
    <p>A well-known quote, contained in a blockquote element.</p>
  </lq>
</fig>

<fig outputclass="text-end">
  <title>Someone famous in <cite>Source Title</cite></title>
  <lq>
    <p>A well-known quote, contained in a blockquote element.</p>
  </lq>
</fig>

Unstyled

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 @outputclass="list-unstyled" for any nested lists as well.

<ul outputclass="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it’s still a list.</li>
  <li>However, this style <b>only applies to immediate child elements</b>.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

Remove a list’s bullets and apply some light margin using the @outputclass="list-inline" attribute.

<ul outputclass="list-inline">
  <li>This is a list item.</li>
  <li>And another one.</li>
  <li>But they're displayed inline.</li>
</ul>

Description list alignment

Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer terms, text is truncated with an ellipsis.

<dl>
  <dlentry>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
  </dlentry>
  <dlentry>
    <dt>Term</dt>
    <dd>
      <p>Definition for the term.</p>
      <p>And some more placeholder definition text.</p>
    </dd>
  </dlentry>
  <dlentry>
    <dt>Another term</dt>
    <dd>This definition is short, so no extra paragraphs or anything.</dd>
  </dlentry>
  <dlentry>
    <dt>Truncated term is truncated</dt>
    <dd>This can be useful when space is tight. Adds an ellipsis at the end.</dd>
  </dlentry>
  <dlentry>
    <dt>Nesting</dt>
    <dd>
      <dl>
        <dlentry>
          <dt>Nested definition list</dt>
          <dd>I heard you like definition lists. Let me put a definition list
            inside your definition list.</dd>
        </dlentry>
      </dl>
    </dd>
  </dlentry>
</dl>

Description list column width

Definitions lists use the twelve column system defined by the Bootstrap grid. By default each <dt> spreads over 3 column widths and each <dd> spreads over 9 column widths. Alter default width of terms by adding <dl otherprops="cols(..)">

<dl otherprops="cols(2)">
  <dlentry>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
  </dlentry>
  <dlentry>
    <dt>Term</dt>
    <dd>
      <p>Definition for the term.</p>
      <p>And some more placeholder definition text.</p>
    </dd>
  </dlentry>
</dl>