Table of content

Show list of Table of content

This tailwind example is contributed by Anonymous, on 28-Jan-2024. Component is made with Tailwind v3.4. It is responsive.

List

Author Anonymous

Tailwind v3.4 6.8k 6

Fork Fullscreen

<div class="w-full bg-gray-100 px-4 py-3 text-left text-gray-800 break-words max-w-md rounded">
    <div class="mx-auto text-xl font-semibold"><strong>Table of content</strong></div>
    <ul class="mt-2 list-disc px-2 pl-6">
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#introduction">Introduction</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#getting-started">Getting Started with
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#responsive-design">Responsive Design in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#theming-and-customization">Theming and
                Customization</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#sass-maps-in-bootstrap">Sass Maps in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#best-practices">Best Practices for Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#code-samples">Code Samples for Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#conclusion">Conclusion</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#change-theme-color">Changing Theme Color in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#using-theme-color">Using Theme Color in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#number-of-colors">Number of Colors in
                Bootstrap</a>
        </li>
        <li>
            <a class="block hover:bg-gray-200 px-2 py-1 rounded" href="#customize-theme">Customizing a Bootstrap
                Theme</a>
        </li>
    </ul>
</div>

Related Examples

Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.8k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Prajwal Hallale

3 years ago

20.5k
Items list
list in fieldset

Prajwal Hallale

4 years ago

9.3k
Minimal list section

Task Master

3 years ago

9.3k
Bullet points list
for sections like "Why Choose Us"

Orson Kincaid

2 years ago

2.5k
Nested list section
List with soft background colors. List with Hierarchy

Orion.c

3 years ago

12.4k
ToDo

Im_angeo

5 months ago

519
List of steps

Leif99

3 years ago

13.9k
List section
Beautiful list section with left border

Leon Bachmann

3 years ago

12.1k
Organization Hierarchy list

Anonymous

3 years ago

9.8k
Responsive list with icons

Prajwal Hallale

3 years ago

10.6k
Users ranking list with points

Leif99

3 years ago

12.9k