bootstrap-content

Bootstrap 5.3 Content

Bootstrap provides typography, image, table, and other content styles built on top of Reboot, a normalized baseline.

Reboot

Bootstrap Reboot normalizes default browser styles for consistent cross-browser rendering. It provides a foundation for the typography and content styles that follow.

Code Elements

<!-- Inline code -->
<p>Use <code>&lt;section&gt;</code> for page sections.</p>

<!-- Code blocks (use pre for preformatted text) -->
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line.&lt;/p&gt;</code></pre>

<!-- Variables -->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

<!-- User input (keyboard) -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Or type <kbd>cd</kbd> to change directory.</p>

<!-- Nested kbd for key combinations -->
<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></kbd>

<!-- Sample output -->
<samp>This text is meant to be sample output from a program.</samp>

Address

<address>
  <strong>Company Name</strong><br>
  123 Main Street<br>
  City, State 12345<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:email@example.com">email@example.com</a>
</address>

Horizontal Rules

<!-- Basic horizontal rule -->
<hr>

<!-- Styled with border utilities -->
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

<!-- With margins -->
<hr class="my-5">

Abbreviations

<p><abbr title="Hypertext Markup Language">HTML</abbr> is the foundation of the web.</p>

<!-- Slightly smaller font size -->
<p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr> for styling.</p>

See references/reboot-reference.md for CSS variables, page defaults, native font stack, and Sass customization options.

Typography

Headings

Standard HTML headings with Bootstrap styling:

<h1>h1. Bootstrap heading</h1>  <!-- 2.5rem -->
<h2>h2. Bootstrap heading</h2>  <!-- 2rem -->
<h3>h3. Bootstrap heading</h3>  <!-- 1.75rem -->
<h4>h4. Bootstrap heading</h4>  <!-- 1.5rem -->
<h5>h5. Bootstrap heading</h5>  <!-- 1.25rem -->
<h6>h6. Bootstrap heading</h6>  <!-- 1rem -->

<!-- Heading classes for non-heading elements -->
<p class="h1">h1 styled paragraph</p>
<p class="h3">h3 styled paragraph</p>

Display Headings

Larger, more opinionated headings:

<h1 class="display-1">Display 1</h1>  <!-- 5rem -->
<h1 class="display-2">Display 2</h1>  <!-- 4.5rem -->
<h1 class="display-3">Display 3</h1>  <!-- 4rem -->
<h1 class="display-4">Display 4</h1>  <!-- 3.5rem -->
<h1 class="display-5">Display 5</h1>  <!-- 3rem -->
<h1 class="display-6">Display 6</h1>  <!-- 2.5rem -->

Lead Text

Make a paragraph stand out:

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

Inline Text Elements

<mark>Highlighted text</mark>
<del>Deleted text</del>
<s>Strikethrough (no longer accurate)</s>
<ins>Inserted text</ins>
<u>Underlined text</u>
<small>Fine print</small>
<strong>Bold text</strong>
<em>Italicized text</em>

Text Utilities

<!-- Font size -->
<p class="fs-1">fs-1 text (2.5rem)</p>
<p class="fs-2">fs-2 text (2rem)</p>
<p class="fs-3">fs-3 text (1.75rem)</p>
<p class="fs-4">fs-4 text (1.5rem)</p>
<p class="fs-5">fs-5 text (1.25rem)</p>
<p class="fs-6">fs-6 text (1rem)</p>

<!-- Font weight -->
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text</p>

<!-- Font style -->
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>

<!-- Line height -->
<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height (1.25)</p>
<p class="lh-base">Base line height (1.5)</p>
<p class="lh-lg">Large line height (2)</p>

<!-- Text decoration -->
<p class="text-decoration-underline">Underlined</p>
<p class="text-decoration-line-through">Line through</p>
<p class="text-decoration-none">No decoration</p>

Text Alignment

<p class="text-start">Left aligned (LTR)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (LTR)</p>

<!-- Responsive alignment -->
<p class="text-sm-start text-md-center text-lg-end">
  Responsive alignment
</p>

Text Wrapping and Overflow

<p class="text-wrap">Wrapping text</p>
<p class="text-nowrap">No wrap text</p>
<p class="text-truncate" style="max-width: 200px;">
  Truncated text with ellipsis...
</p>
<p class="text-break">Break long words</p>

Blockquotes

<figure>
  <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>

Lists

<!-- Unstyled list -->
<ul class="list-unstyled">
  <li>No bullets</li>
  <li>On this list</li>
</ul>

<!-- Inline list -->
<ul class="list-inline">
  <li class="list-inline-item">First</li>
  <li class="list-inline-item">Second</li>
  <li class="list-inline-item">Third</li>
</ul>

Text Transform

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Monospace Font

<p class="font-monospace">This is in monospace</p>

Reset Color

<!-- Inherit color from parent instead of link styling -->
<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Customizing Headings

Add secondary, faded text to headings:

<h3>
  Fancy display heading
  <small class="text-body-secondary">With faded secondary text</small>
</h3>

<h1 class="display-4">
  Display heading
  <small class="text-body-secondary">Secondary text</small>
</h1>

Responsive Font Sizes

Bootstrap 5 enables RFS (Responsive Font Sizes) by default, automatically scaling font-size based on viewport dimensions. See references/typography-reference.md for RFS details and Sass customization options.

Images

Responsive Images

<img src="..." class="img-fluid" alt="Responsive image">

Image Thumbnails

<img src="..." class="img-thumbnail" alt="Thumbnail">

Aligning Images

<img src="..." class="float-start" alt="Left aligned">
<img src="..." class="float-end" alt="Right aligned">

<!-- Centered block image -->
<img src="..." class="d-block mx-auto" alt="Centered">

Picture Element

<picture>
  <source srcset="large.jpg" media="(min-width: 992px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" class="img-fluid" alt="Responsive">
</picture>

Tables

Basic Table

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

Table Variants

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Table Styles

<!-- Striped rows -->
<table class="table table-striped">...</table>

<!-- Striped columns -->
<table class="table table-striped-columns">...</table>

<!-- Hoverable rows -->
<table class="table table-hover">...</table>

<!-- Active rows/cells -->
<tr class="table-active">...</tr>

<!-- Bordered -->
<table class="table table-bordered">...</table>

<!-- Borderless -->
<table class="table table-borderless">...</table>

<!-- Small table -->
<table class="table table-sm">...</table>

<!-- Combine styles -->
<table class="table table-striped table-hover table-bordered">...</table>

Table Head Variants

<!-- Light header -->
<table class="table">
  <thead class="table-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

<!-- Dark header -->
<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

Table Group Dividers

Add a thicker border between table sections:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>John</td>
    </tr>
  </tbody>
</table>

Table Captions

<!-- Caption at bottom (default) -->
<table class="table">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<!-- Caption at top -->
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Table Footer

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$10.00</td>
    </tr>
  </tbody>
  <tfoot class="table-group-divider">
    <tr>
      <th>Total</th>
      <td>$10.00</td>
    </tr>
  </tfoot>
</table>

Responsive Tables

<!-- Always responsive -->
<div class="table-responsive">
  <table class="table">...</table>
</div>

<!-- Responsive at breakpoint -->
<div class="table-responsive-md">
  <table class="table">...</table>
</div>

Vertical Alignment

<table class="table align-middle">
  <tr class="align-bottom">
    <td class="align-top">...</td>
  </tr>
</table>

Figures

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

<!-- Right-aligned caption -->
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">Right-aligned caption.</figcaption>
</figure>

Additional Resources

Reference Files

• references/reboot-reference.md - CSS variables, page defaults, native font stack, Sass customization
• references/typography-reference.md - Complete text utilities, RFS details, Sass customization
• references/images-reference.md - Complete image class reference and Sass customization
• references/tables-reference.md - Complete table class reference
• references/figures-reference.md - Complete figure class reference

Example Files

• examples/reboot-elements.html - Code, kbd, var, samp, abbr, hr elements
• examples/typography-patterns.html - Typography, headings, text utilities
• examples/images-patterns.html - Responsive images and alignment
• examples/tables.html - Table styling and variants
• examples/figures-patterns.html - Figure and caption patterns