→ 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.3k

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

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

9.5k

v.5.3
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

1 year ago

8k

v.5.3
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

1 year ago

5.8k

v.5.3
User Profile Card with Bootstrap 5

Author:
Nguyen Minh

1 year ago

17k

v.5.3
Feature showcase cards

Author:
Mateo Rojas

1 year ago

1.3k

v.5.3
Activity Logs Dashboard
activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

4.9k

v.5.3
Profile card
Profile card with images and buttons

Author:
Anonymous

1 year ago

7.2k

v.4.6
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

5.2k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

2.9k

v.4.6
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

1 year ago

3.2k

v.5.3
Navbar Specials
Navbar with special design

Author:
almounkez

1 year ago

2.2k

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

1 year ago

3.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent