Bootstrap Content Styling

Typography

Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

Headings

All HTML headings, <h1> through <h6>, are available.


<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

You can also use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element:


<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>

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.


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Lead

Make a paragraph stand out by adding .lead.


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

Inline Text Elements


<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Text Utilities

Change text alignment, transform, style, weight, and color with text utilities.


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

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

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text.</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Images and Figures

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.


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

Image Thumbnails

Add .img-thumbnail to give an image a rounded 1px border appearance.


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

Aligning Images

Align images with the helper float classes or text alignment classes.


<img src="..." class="rounded float-start" alt="Floated to left">
<img src="..." class="rounded float-end" alt="Floated to right">

<div class="text-center">
  <img src="..." class="rounded" alt="Centered image">
</div>

Figures

For displaying images with optional captions, use the <figure> and <figcaption> elements with Bootstrap's .figure and .figure-caption classes.


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

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

Tables

Bootstrap provides several options for styling tables.

Basic Table

Add .table to any <table> element for the basic styling.


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Table Variants

Use contextual classes to color tables, table rows, or individual cells.


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

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

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Striped Rows

Add .table-striped to create zebra-striping for table rows.


<table class="table table-striped">
  <!-- Table content -->
</table>

Hoverable Rows

Add .table-hover to enable a hover state on table rows.


<table class="table table-hover">
  <!-- Table content -->
</table>

Bordered Tables

Add .table-bordered for borders on all sides of the table and cells.


<table class="table table-bordered">
  <!-- Table content -->
</table>

Responsive Tables

Make tables responsive by wrapping them in .table-responsive for horizontal scrolling.


<div class="table-responsive">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

You can also use responsive breakpoint-specific classes for different screen sizes:


<div class="table-responsive-sm">...</div>
<div class="table-responsive-md">...</div>
<div class="table-responsive-lg">...</div>
<div class="table-responsive-xl">...</div>
<div class="table-responsive-xxl">...</div>

Code Styling

Inline Code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.


For example, <code><section></code> should be wrapped as inline.

Code Blocks

Use <pre> for multiple lines of code. Be sure to escape HTML angle brackets.


<pre>
<code>
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code>
</pre>

Variables

For indicating variables use the <var> tag.


<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User Input

Use the <kbd> to indicate input that is typically entered via keyboard.


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>

Sample Output

For indicating sample output from a program use the <samp> tag.


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

Tip: You can combine Bootstrap's .bg-light and .p-3 classes with <pre> for nicely formatted code blocks.