bootstrap_ref_css_text

Bootstrap 5 CSS Typography Reference

Bootstrap’s Default Typography Settings

Bootstrap 5 sets a global default font-size of 1rem (browser default is typically 16px), with a line-height of 1.5.

These defaults are applied to the <body> and all paragraphs (<p>).

In addition, all <p> elements have margin-bottom: 1rem by default.

The default font stack prioritizes system fonts for better performance and native feel: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji".

HTML Headings and Display Headings

All HTML headings, <h1> through <h6>, are available and styled by Bootstrap. .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.

Element/Class
Description
Example


`<h1>` - `<h6>` or `.h1` - `.h6`
Standard HTML headings. Font sizes are responsive by default.
`<h1>h1. Bootstrap heading</h1>`


`<small>` (within headings)
Creates a lighter, secondary text in any heading.
`<h3>Fancy display heading <small class="text-muted">With faded secondary text</small></h3>`


`Display Headings` (`.display-1` to `.display-6`)
For larger, more opinionated heading styles.
`<h1 class="display-1">Display 1</h1>`


`.lead`
Makes a paragraph stand out.
`<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>`

Inline Text Elements and Utility Classes

Bootstrap styles common inline HTML5 elements and provides utility classes for further text styling.

Element/Class
Description
Example


`<mark>` or `.mark`
Highlights text (yellow background by default).
`You can use the mark tag to <mark>highlight</mark> text.`


`<del>`
Indicates deleted text (strikethrough).
`<del>This line of text is meant to be treated as deleted text.</del>`


`<s>`
Indicates text that is no longer relevant (strikethrough).
`<s>This line of text is meant to be treated as no longer accurate.</s>`


`<ins>`
Indicates inserted text (underline).
`<ins>This line of text is meant to be treated as an addition to the document.</ins>`


`<u>`
Indicates underlined text.
`<u>This line of text will render as underlined.</u>`


`.small` or `<small>`
Indicates smaller text (set to 85% of the size of the parent).
`<p><small>This line of text is meant to be treated as fine print.</small></p>`


`**` or `<b>`
Indicates bold text.
`**rendered as bold text**`


`<em>` or `<i>`
Indicates italicized text.
`<em>rendered as italicized text</em>`


`.text-start` (replaces `.text-left`)
Indicates left-aligned text (respects LTR/RTL).
`<p class="text-start">Start aligned text on all viewport sizes.</p>`


`.text-center`
Indicates center-aligned text.
`<p class="text-center">Center aligned text on all viewport sizes.</p>`


`.text-end` (replaces `.text-right`)
Indicates right-aligned text (respects LTR/RTL).
`<p class="text-end">End aligned text on all viewport sizes.</p>`


`.text-sm-start`, `.text-md-center`, etc.
Responsive text alignment for different breakpoints.
`<p class="text-sm-end">End aligned text on viewports SM (small) or wider.</p>`


`.text-justify` (Use with caution)
Indicates justified text. Justification can sometimes negatively impact readability.
`<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>`


`.text-wrap` / `.text-nowrap`
Controls text wrapping.
`<div class="badge bg-primary text-wrap" style="width: 6rem;">This text should wrap.</div>` `<p class="text-nowrap">This text should not wrap.</p>`


`.text-break`
Prevents long strings from breaking layouts by inserting `word-wrap: break-word` and `word-break: break-word`.
`<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>`


`.text-lowercase`
Transforms text to lowercase.
`<p class="text-lowercase">Lowercased text.</p>`


`.text-uppercase`
Transforms text to uppercase.
`<p class="text-uppercase">Uppercased text.</p>`


`.text-capitalize`
Transforms text to capitalized.
`<p class="text-capitalize">CapiTaliZed text.</p>`


`.fs-1` to `.fs-6`
Font size utility classes, similar to heading sizes but can be applied to any element.
`<p class="fs-1">.fs-1 text</p>`


`.fw-bold`, `.fw-bolder`, `.fw-normal`, `.fw-light`, `.fw-lighter`
Font weight utility classes.
`<p class="fw-bold">Bold text.</p>`


`.fst-italic`, `.fst-normal`
Font style utility classes.
`<p class="fst-italic">Italic text.</p>`


`.lh-1`, `.lh-sm`, `.lh-base`, `.lh-lg`
Line height utility classes.
`<p class="lh-sm">This is text with a small line height.</p>`


`.text-muted`
Indicates muted text (typically gray).
`<p class="text-muted">Muted text with a faded look.</p>`


`.text-reset`
Resets the color of a text or link element, inheriting the color from its parent.
`<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a>.</p>`


`.text-decoration-none`, `.text-decoration-underline`, `.text-decoration-line-through`
Text decoration utilities.
`<a href="#" class="text-decoration-none">Non-underlined link</a>`

Abbreviations, Addresses, and Blockquotes

Element/Class
Description
Example


`<abbr>`
The `<abbr>` element indicates an abbreviation or acronym. Add the `title` attribute for the full expansion on hover. Bootstrap gives it a subtle dotted bottom border and a help cursor.
`<p><abbr title="attribute">attr</abbr></p><p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> (with .initialism for slightly smaller text)</p>`


`.initialism`
Displays the text inside an `<abbr>` element in a slightly smaller font size.
See `<abbr>` example.


`<address>`
Presents contact information. Preserves formatting by ending lines with `<br>`.
`<address>
  **Twitter, Inc.**<br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>`


`<blockquote>`
Indicates blocks of content quoted from another source. Wrap the quote in `<blockquote class="blockquote">`.
`<figure class="mt-4">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>`


`.blockquote-footer`
For identifying the source. Wrap the source work in `<cite>`.
See `<blockquote>` example.


Alignment for Blockquotes
Use text utilities like `.text-center` or `.text-end` on the `<blockquote>` or `<figure>`.
`<figure class="text-end">
  <blockquote class="blockquote"> ... </blockquote>
  <figcaption class="blockquote-footer"> ... </figcaption>
</figure>`

Lists

Element/Class
Description
Example


`<ul>`
Indicates an unordered list (bullet points).
`<ul><li>Item 1</li><li>Item 2</li></ul>`


`<ol>`
Indicates an ordered list (numbered).
`<ol><li>Item 1</li><li>Item 2</li></ol>`


`.list-unstyled`
Removes the default `list-style` and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items.
`<ul class="list-unstyled"><li>Item 1</li><li>Nested:<ul><li>Sub-item (styled)</li></ul></li></ul>`


`.list-inline`
Places all list items on a single line. Use with `.list-inline-item` on the `<li>` elements.
`<ul class="list-inline"><li class="list-inline-item">Item 1</li><li class="list-inline-item">Item 2</li></ul>`


`<dl>`, `<dt>`, `<dd>` (Description Lists)
Indicates a description list. Bootstrap styles these with some margin.
`<dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd></dl>`


Horizontal Description Lists (using Grid)
The older `.dl-horizontal` class is deprecated. Use Bootstrap's grid system (or other utilities) for horizontal `<dl>`s.
`<dl class="row">
  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">Definition for the term.</dd>
  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is limited.</dd>
</dl>`

Practical Application: Typography is foundational. Use these for structuring articles, product descriptions, and any textual content.
Common Obstacle: Over-styling. Start with semantic HTML, then use Bootstrap classes for enhancements.
Resource: Official Bootstrap Typography Docs: https://getbootstrap.com/docs/5.3/content/typography/

Code Blocks and Variables

Element/Class
Description
Example

Indicates inline snippets of code. Wrap inline code with ```. For example, <section> should be wrapped as inline.

<kbd> Indicates user input that is typically entered via keyboard. To switch directories, type <kbd>cd</kbd> followed by the directory name. For saving, press <kbd><kbd>ctrl</kbd> + <kbd>s</kbd></kbd>

<pre> Indicates multiple lines of code. Escape angle brackets in the code for proper rendering. <pre><p>Sample text here...</p></pre>

.pre-scrollable Makes a <pre> element scrollable if its content exceeds the max-height of 340px. <pre class="pre-scrollable"></pre>

<samp> Indicates sample output from a computer program. <p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>

<var> Indicates variables in a mathematical expression or programming context. <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>