→ 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

3.5k

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

Get in Touch form

Author:
Mateo Rojas

9 months ago

1.7k

v.5.3
Interactive Right-Side Menu
A sleek and responsive right sidebar featuring user profile, navigation, and activity feed with modern design elements

Author:
Mason Ashford

10 months ago

7.8k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

1 year ago

1.6k

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

2 weeks ago

172

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

1 year ago

6.9k

v.4.6
Simple search bar

Author:
Reza Farhadi

1 year ago

4k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

1.6k

v.5.3
Parallax effect with image background

Author:
Anonymous

9 months ago

1.9k

v.4.6
User Profile Card with Bootstrap 5

Author:
Nguyen Minh

1 year ago

14.3k

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

11 months ago

2.8k

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

7 months ago

822

v.4.6
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

10 months ago

2.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent