Table of contents

Add a section to your page for displaying list of sections in your content.

Examples

We have several examples for you to choose from.

Default

  1. First topic
    1. Sub topic
    2. Sub topic
      1. Sub-sub topic
      2. Sub-sub topic
    3. Sub topic
  2. Second topic
  3. Third topic
  4. Fourth topic
<ol class="toc">
  <li>
    <a href="#">First topic</a>
    <ol>
      <li><a href="#">Sub topic</a></li>
      <li>
        <a href="#">Sub topic</a>
        <ol>
          <li><a href="#">Sub-sub topic</a></li>
          <li><a href="#">Sub-sub topic</a></li>
        </ol>
      </li>
      <li><a href="#">Sub topic</a></li>
    </ol>
  </li>
  <li><a href="#">Second topic</a></li>
  <li><a href="#">Third topic</a></li>
  <li><a href="#">Fourth topic</a></li>
</ol>
Markup
Copy

Numbered

Instead of a "#", put a number beside each section link.

  1. First topic
    1. Sub topic
    2. Sub topic
      1. Sub-sub topic
      2. Sub-sub topic
    3. Sub topic
  2. Second topic
  3. Third topic
  4. Fourth topic
<ol class="toc toc-numbered">
  <li>
    <a href="#">First topic</a>
    <ol>
      <li><a href="#">Sub topic</a></li>
      <li>
        <a href="#">Sub topic</a>
        <ol>
          <li><a href="#">Sub-sub topic</a></li>
          <li><a href="#">Sub-sub topic</a></li>
        </ol>
      </li>
      <li><a href="#">Sub topic</a></li>
    </ol>
  </li>
  <li><a href="#">Second topic</a></li>
  <li><a href="#">Third topic</a></li>
  <li><a href="#">Fourth topic</a></li>
</ol>
Markup
Copy

Caption

Use a data-caption data attribute to include a caption above the table of contents. Also, this example shows how you can use utility classes to modify a table of content's interface.

  1. First topic
    1. Sub topic
    2. Sub topic
      1. Sub-sub topic
      2. Sub-sub topic
    3. Sub topic
  2. Second topic
  3. Third topic
  4. Fourth topic
<ol class="toc bg-light px-4 py-3" data-caption="Table of content">
  <li>
    <a href="#">First topic</a>
    <ol>
      <li><a href="#">Sub topic</a></li>
      <li>
        <a href="#">Sub topic</a>
        <ol>
          <li><a href="#">Sub-sub topic</a></li>
          <li><a href="#">Sub-sub topic</a></li>
        </ol>
      </li>
      <li><a href="#">Sub topic</a></li>
    </ol>
  </li>
  <li><a href="#">Second topic</a></li>
  <li><a href="#">Third topic</a></li>
  <li><a href="#">Fourth topic</a></li>
</ol>
Markup
Copy