Bootstrap Typography

Bootstrap 5 Text & Typography

Bootstrap 5 provides a solid foundation for typography, ensuring consistent and readable text across devices. It sets global defaults and offers utility classes for further customization.

Bootstrap’s Default Settings

Bootstrap 5 sets a global default font-size of 1rem (typically 16px in most browsers) and a line-height of 1.5.

These defaults are applied to the <body> element and inherited by paragraphs and other text elements.

All <p> elements have a default margin-bottom: 1rem.

Bootstrap 5 also implements Responsive Font Sizes (RFS) by default for headings, allowing text to scale more naturally across device sizes. Learn more at https://getbootstrap.com/docs/5.3/content/typography/#responsive-font-sizes

Headings <h1> - <h6>

Bootstrap styles HTML headings (<h1> to <h6>) with specific font sizes, margins, and weights. With RFS, these sizes adapt to the viewport.

<!-- Example display of headings (actual size depends on RFS and viewport) -->
<h1>h1. Bootstrap heading (Approx. 2.5rem)</h1>
<h2>h2. Bootstrap heading (Approx. 2rem)</h2>
<h3>h3. Bootstrap heading (Approx. 1.75rem)</h3>
<h4>h4. Bootstrap heading (Approx. 1.5rem)</h4>
<h5>h5. Bootstrap heading (Approx. 1.25rem)</h5>
<h6>h6. Bootstrap heading (Approx. 1rem)</h6>

Display Headings: For larger, more opinionated heading styles, use display heading classes like .display-1 through .display-6.

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

Inline Text Elements

Bootstrap provides styling for common inline HTML elements:

<small>: For de-emphasized text, often used as secondary text in headings or fine print. It sets the font size to 87.5% of the parent’s.

<h1>Main Heading <small class="text-muted">Secondary text</small></h1>
<p>This is normal text, and this is <small>small text</small>.</p>

<mark> or .mark: Highlights text with a background color (typically yellow).

<p>Use the <mark>mark element</mark> or <span class="mark">.mark class</span> to highlight text.</p>

<abbr>: For abbreviations and acronyms. Bootstrap styles it with a dotted bottom border and a help cursor on hover, revealing the full text from the title attribute.

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is a markup language.</p>
<!-- `.initialism` class makes the <abbr> text slightly smaller. -->

Blockquotes

For quoting blocks of content from another source, wrap <blockquote class="blockquote">. For attribution, use a <figcaption class="blockquote-footer">.

<figure class="mb-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>

<!-- Note: The older `.blockquote-reverse` class is removed. Use text alignment utilities like `.text-end` on the `<figure>` or `<blockquote>` for right-aligned quotes. -->

Description Lists <dl>

Bootstrap styles <dl>, <dt>, and <dd> elements. For a horizontal layout where terms and descriptions are side-by-side, use Bootstrap’s grid system or flex utilities.

<!-- Default stacked layout -->
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<!-- Horizontal layout using grid -->
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3 text-truncate">Long truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is limited. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>
<!-- Tip: The class `.dl-horizontal` from older Bootstrap versions is removed. The grid system offers more flexibility. -->

Code Blocks

: Wrap inline snippets of code with . HTML angle brackets will be escaped.

<p>For example, `&lt;section&gt;` should be wrapped as inline.</p>

<kbd>: Indicates user input that is typically entered via keyboard.

<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>

<pre>: For multiple lines of code. Escape angle brackets for proper rendering. Consider using the .pre-scrollable class for scrollable blocks.

<pre>`&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;`</pre>

<pre class="pre-scrollable">`// This is a long line of code that will make the pre tag scrollable if it exceeds the width.
// And many more lines...
// ...
// ...
// ... (repeat for many lines to demonstrate scrollability)
`</pre>

Contextual Colors and Backgrounds

Bootstrap provides contextual text color and background utility classes to convey meaning through color. These align with the button and alert color schemes.

Text color classes: .text-primary, .text-secondary, .text-success, .text-info, .text-warning, .text-danger, .text-light, .text-dark, .text-body (default), .text-muted, .text-black-50, .text-white-50.

<p class="text-primary">.text-primary: Primary text for emphasis.</p>
<p class="text-success">.text-success: Indicates a successful action.</p>
<p class="text-danger">.text-danger: Indicates a dangerous action.</p>
<p class="text-muted">.text-muted: Muted text for less emphasis.</p>

Background color classes: .bg-primary, .bg-secondary, .bg-success, etc. These set the background color. Text color might need to be adjusted for contrast (e.g., using .text-white on .bg-dark). Bootstrap 5 also offers combined text and background color utilities like .text-bg-primary.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary .text-white</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success .text-white</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning .text-dark</div>
<div class="p-3 mb-2 text-bg-danger">.text-bg-danger (Combined class)</div>
<!-- Tip: Use `.text-dark` or `.text-white` to ensure contrast on colored backgrounds. -->

Application Scenario: Contextual colors are vital for user feedback, highlighting important information, or styling status indicators.

More Typography Utility Classes

Bootstrap includes many utility classes for quickly styling text.

Class	Description
.lead	Makes a paragraph stand out (larger font size, lighter weight).
.small	Creates smaller text (87.5% of parent’s font size).
.text-start	Left-aligns text (or start-aligns in LTR, end-aligns in RTL). Replaces .text-left.
.text-center	Center-aligns text.
.text-end	Right-aligns text (or end-aligns in LTR, start-aligns in RTL). Replaces .text-right.
.text-justify	Justifies text.
.text-wrap	Allows text to wrap (default behavior).
.text-nowrap	Prevents text from wrapping.
.text-break	Prevents long strings of text from breaking your layout by allowing words to break.
.text-lowercase	Transforms text to lowercase.
.text-uppercase	Transforms text to uppercase.
.text-capitalize	Capitalizes the first letter of each word.
.fst-italic	Styles text as italic. Replaces .font-italic.
.fst-normal	Resets text to normal font style.
.fw-bold	Sets font weight to bold. Replaces .font-weight-bold.
.fw-bolder	Sets font weight to bolder (relative to parent).
.fw-semibold	Sets font weight to semibold.
.fw-normal	Sets font weight to normal.
.fw-light	Sets font weight to light.
.fw-lighter	Sets font weight to lighter (relative to parent).
.lh-1, .lh-sm, .lh-base, .lh-lg	Adjusts line height.
.text-decoration-none	Removes text decoration (e.g., underlines from links).
.text-decoration-underline	Adds an underline to text.
.text-decoration-line-through	Adds a line-through to text.
.text-reset	Resets the color of a text or link element to its parent’s color.
.list-unstyled	Removes default list styling (bullets/numbers) and left margin from <ul> or <ol>.
.list-inline	Styles list items to display inline (display: inline-block) with some padding.
.list-inline-item	Class to be applied to each <li> when using .list-inline.

For a complete reference of all typography and text utility classes, consult the official Bootstrap 5 documentation:

• Typography: https://getbootstrap.com/docs/5.3/content/typography/
• Text Utilities: https://getbootstrap.com/docs/5.3/utilities/text/