→ 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

1.8k

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

Modern Bootstrap Search Bar

Author:
Anonymous

4 months ago

2.3k

v.5.3
About Our Company
Display your company data

Author:
Tane Mahuta

9 months ago

952

v.5.3
Responsive blog home layout

Author:
Juniper

6 months ago

1.5k

v.5.3
Bento Grid Layout with Images

Author:
Juan Martinez

9 months ago

1.7k

v.5.3
FAQ example with bootstrap 4
Simple Frequently Asked Questions section

Author:
Moana silva

9 months ago

1.3k

v.4.6
Simple hero section

Author:
Mateo Rojas

4 months ago

2.1k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

9 months ago

4.5k

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

7 months ago

985

v.4.6
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

7 months ago

2.3k

v.4.6
Newsletter Form
Rounded newsletter form

Author:
Ross Wille

9 months ago

1.7k

v.5.3
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

1 month ago

351

v.4.6
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

5 months ago

4.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent