→ Moana silva
→ Collapsible Nested list

Collapsible Nested list

Tree structure design for nested list

This bootstrap css example is contributed by Moana silva, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: List

Author Moana silva

4.7k

v.5.3

Fork Fullscreen

<div class="container mt-5">
    <h1 class="mb-4">Bootstrap Tree</h1>
    <ul class="tree">
        <li>
            <span class="toggle"><i class="bi bi-chevron-right"></i></span>
            Root
            <ul>
                <li>
                    <span class="toggle"><i class="bi bi-chevron-right"></i></span>
                    Branch 1
                    <ul>
                        <li>Leaf 1.1</li>
                        <li>Leaf 1.2</li>
                    </ul>
                </li>
                <li>
                    <span class="toggle"><i class="bi bi-chevron-right"></i></span>
                    Branch 2
                    <ul>
                        <li>Leaf 2.1</li>
                        <li>
                            <span class="toggle"><i class="bi bi-chevron-right"></i></span>
                            Branch 2.2
                            <ul>
                                <li>Leaf 2.2.1</li>
                                <li>Leaf 2.2.2</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Leaf 3</li>
            </ul>
        </li>
    </ul>
</div>

More Examples

Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

1 year ago

1.3k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

2.2k

v.5.3
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

2 years ago

5k

v.5.3
Fancy Arrow Breadcrumb

Author:
Mateo Rojas

1 year ago

1k

v.5.3
Team Section with Bootstrap 5

Author:
Arturo

1 year ago

3.2k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

1 year ago

10k

v.5.3
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

5.4k

v.5.3
Button group
solid button group

Author:
Mishti

1 year ago

1.4k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 year ago

1.8k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

9.4k

v.5.3
Call to Action Block

Author:
Kemaya m

1 year ago

1.3k

v.4.6
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

1 year ago

3.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent