Home
Anonymous
Table of content

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 CSS v3. It is responsive.

List

Author Anonymous

5.1k

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

Author:
Noob

2 years ago

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

Author:
Prajwal Hallale

2 years ago

19.7k
Feature List
Feature List Card (Responsive and supports Dark Mode)

Author:
Mr Robot

2 years ago

10.2k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

1 year ago

6.5k
Nested list

Author:
Lukas Müller

2 years ago

12.6k
List example

Author:
Isabella Kowalski

2 years ago

13.3k
List of steps

Author:
Leif99

2 years ago

13k
Order Delivered List

Author:
ABDO-SY

2 months ago

396
Item List with title
created by using fieldset and legend tags

Author:
Prashant

2 years ago

10.8k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

5 months ago

1.5k
Stacked list

Author:
Odessa Young

2 years ago

18.4k
List of links

Author:
Prajwal Hallale

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components