##### Basic

Use the `accordion` class to expand/collapse the accordion content.

##

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_01" aria-expanded="true" aria-controls="demo_accordion_item_01">
                    Accordion Item #1
                </button>
            </h2>
            <div id="demo_accordion_item_01" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_02" aria-expanded="false" aria-controls="demo_accordion_item_02">
                    Accordion Item #2
                </button>
            </h2>
            <div id="demo_accordion_item_02" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_03" aria-expanded="false" aria-controls="demo_accordion_item_03">
                    Accordion Item #3
                </button>
            </h2>
            <div id="demo_accordion_item_03" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Flush

Use `accordion-flush` class to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

##

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

    <div class="accordion accordion-flush" id="demo_accordion_main_02">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_11" aria-expanded="true" aria-controls="demo_accordion_item_11">
                    Accordion Item #1
                </button>
            </h2>
            <div id="demo_accordion_item_11" class="accordion-collapse collapse show" data-bs-parent="#demo_accordion_main_02">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_12" aria-expanded="false" aria-controls="demo_accordion_item_12">
                    Accordion Item #2
                </button>
            </h2>
            <div id="demo_accordion_item_12" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_13" aria-expanded="false" aria-controls="demo_accordion_item_13">
                    Accordion Item #3
                </button>
            </h2>
            <div id="demo_accordion_item_13" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Accordions with Icons

Use `accordion-icon` class to show custom icon at accordion.

##

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-icon" id="demo_accordion_main_03">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_31" aria-expanded="true" aria-controls="demo_accordion_item_31">
                    <i class="ri-code-line me-2"></i> Frontend Development
                </button>
            </h2>
            <div id="demo_accordion_item_31" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
                <div class="accordion-body">
                    <strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_32" aria-expanded="false" aria-controls="demo_accordion_item_32">
                    <i class="ri-braces-line me-2"></i> Backend Development
                </button>
            </h2>
            <div id="demo_accordion_item_32" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
                <div class="accordion-body">
                    <strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_33" aria-expanded="false" aria-controls="demo_accordion_item_33">
                    <i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
                </button>
            </h2>
            <div id="demo_accordion_item_33" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
                <div class="accordion-body">
                    <strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
                </div>
            </div>
        </div>
    </div>

##### Accordions without Icons

Use the `.accordion-icon-none` class to create Bootstrap accordions without icons. This class hides any default icons, giving your accordion a cleaner look.

##

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-icon-none" id="demo_accordion_main_04">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_41" aria-expanded="true" aria-controls="demo_accordion_item_41">
                    <span class="accordion-icon me-2">
                        <i class="ri-code-line"></i>
                    </span>
                    Frontend Development
                </button>
            </h2>
            <div id="demo_accordion_item_41" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
                <div class="accordion-body">
                    <strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_42" aria-expanded="false" aria-controls="demo_accordion_item_42">
                    <i class="ri-braces-line me-2"></i> Backend Development
                </button>
            </h2>
            <div id="demo_accordion_item_42" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
                <div class="accordion-body">
                    <strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_43" aria-expanded="false" aria-controls="demo_accordion_item_43">
                    <i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
                </button>
            </h2>
            <div id="demo_accordion_item_43" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
                <div class="accordion-body">
                    <strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
                </div>
            </div>
        </div>
    </div>

##### Accordions with Plus Icon

Use the `.accordion-with-plus` class to add a plus icon to your Bootstrap accordion. Place the icon inside the `.accordion-header` to indicate expand/collapse functionality.

##

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-with-plus" id="demo_accordion_main_06">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_61" aria-expanded="true" aria-controls="demo_accordion_item_61">
                    <span class="accordion-icon me-2">
                        <i class="ri-code-line"></i>
                    </span>
                    Frontend Development
                </button>
            </h2>
            <div id="demo_accordion_item_61" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_62" aria-expanded="false" aria-controls="demo_accordion_item_62">
                    <i class="ri-braces-line me-2"></i> Backend Development
                </button>
            </h2>
            <div id="demo_accordion_item_62" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_63" aria-expanded="false" aria-controls="demo_accordion_item_63">
                    <i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
                </button>
            </h2>
            <div id="demo_accordion_item_63" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Accordions with Left Icon with Plus Icon

Use the `.accordion-with-left-icon` class to add an icon on the left of each accordion item. Place your icon in an `<i>` tag within the `.accordion-header`.

##

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-with-plus accordion-with-left-icon" id="demo_accordion_main_07">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_71" aria-expanded="true" aria-controls="demo_accordion_item_71">
                    Frontend Development
                </button>
            </h2>
            <div id="demo_accordion_item_71" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_72" aria-expanded="false" aria-controls="demo_accordion_item_72">
                    Backend Development
                </button>
            </h2>
            <div id="demo_accordion_item_72" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_73" aria-expanded="false" aria-controls="demo_accordion_item_73">
                    Bootstrap Customizations
                </button>
            </h2>
            <div id="demo_accordion_item_73" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Accordions with theme color

Customize your Bootstrap accordion header with theme colors by applying classes like `.accordion-primary` or `.text-white`.

##

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-primary accordion-border-box" id="demo_accordion_main_08">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_81" aria-expanded="true" aria-controls="demo_accordion_item_81">
                    Frontend Development
                </button>
            </h2>
            <div id="demo_accordion_item_81" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_82" aria-expanded="false" aria-controls="demo_accordion_item_82">
                    Backend Development
                </button>
            </h2>
            <div id="demo_accordion_item_82" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_83" aria-expanded="false" aria-controls="demo_accordion_item_83">
                    Bootstrap Customizations
                </button>
            </h2>
            <div id="demo_accordion_item_83" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Accordions with subtitle

Add subtitles to Bootstrap accordions by including a `<h6>` or `<small>` tag in the `.accordion-header`. This provides extra context for each section.

##

Frontend Development

Press to expand

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development

Press to expand

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations

Press to expand

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-secondary accordion-border-box" id="demo_accordion_main_09">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_91" aria-expanded="true" aria-controls="demo_accordion_item_91">
                    <div>
                        <p class="mb-0">Frontend Development</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_91" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
                <div class="accordion-body">
                    ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_92" aria-expanded="false" aria-controls="demo_accordion_item_92">
                    <div>
                        <p class="mb-0">Backend Development</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_92" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_93" aria-expanded="false" aria-controls="demo_accordion_item_93">
                    <div>
                        <p class="mb-0">Bootstrap Customizations</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_93" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
                <div class="accordion-body">
                ...
                </div>
            </div>
        </div>
    </div>

##### Accordion With Content

You can create an accordion with images in Bootstrap by including `<img>` tags within the `.accordion-header` section. This lets you display images alongside text content, enhancing visual appeal and information delivery.

##

Frontend Development

Press to expand

Frontend Development focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.

##

Backend Development

Press to expand

Backend Development involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.

##

Bootstrap Customizations

Press to expand

Bootstrap Customizations allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.

    <div class="accordion accordion-border-box" id="demo_accordion_main_10">
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_100" aria-expanded="true" aria-controls="demo_accordion_item_100">
                    <div class="avatar-image avatar-lg me-3">
                        <img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
                    </div>
                    <div>
                        <p class="mb-0">Frontend Development</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_100" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
                <div class="accordion-body">
                    <strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_101" aria-expanded="false" aria-controls="demo_accordion_item_101">
                    <div class="avatar-image avatar-lg me-3">
                        <img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
                    </div>
                    <div>
                        <p class="mb-0">Backend Development</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_101" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
                <div class="accordion-body">
                    <strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_103" aria-expanded="false" aria-controls="demo_accordion_item_103">
                    <div class="avatar-image avatar-lg me-3">
                        <img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
                    </div>
                    <div>
                        <p class="mb-0">Bootstrap Customizations</p>
                        <p class="fs-12 mb-0 mt-1">Press to expand</p>
                    </div>
                </div>
            </h2>
            <div id="demo_accordion_item_103" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
                <div class="accordion-body">
                    <strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
                </div>
            </div>
        </div>
    </div>

##### Nesting Accordions

With Bootstrap, you can create nested accordions to organize content hierarchically. To do this, simply place an `<accordion>` component inside another `<accordion>`. Make sure each nested accordion has a unique `ID` for proper functionality.

##

##

Set up your development environment by installing necessary tools and frameworks like Node.js, npm, and a code editor.

##

Install tools such as Node.js, npm, and any code editor like VSCode.

##

Design UI using tools like Figma or Adobe XD.

##

Create Wireframe to plan the application layout.

##

Code frontend components and perform regular testing.

##

Follow best coding practices and use frameworks like Bootstrap.

##

##

Install and configure backend environment.

##

Install server frameworks and databases.

##

Develop and test APIs using tools like Postman.

##

Use Postman to test API endpoints.

##### Collapse Example

You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required.

Link with href

##### More Details

Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.

    <!-- Collapsible Trigger Area -->
    <div class="d-inline-flex gap-2 mb-3">
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
        </button>
    </div>
    <!-- Collapsible Content Area -->
    <div class="collapse show" id="collapseExample">
        <div class="card card-body mb-0">
            <h5 class="card-title">More Details</h5>
            <p class="card-text">
                Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
            </p>
        </div>
    </div>

##### Horizontal Collapse

Use the `collapse-horizontal` class to make elements slide open and closed horizontally, instead of vertically. Make sure to set a specific `width` on the child element that you want to collapse.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.

    <!-- Collapsible Trigger Area -->
    <div class="d-inline-flex gap-2 mb-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
            Toggle width collapse
        </button>
    </div>

    <!-- Collapsible Content Area -->
    <div class="collapse show collapse-horizontal" id="collapseWidthExample">
        <div class="card card-body" style="width: 300px;">
            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.
        </div>
    </div>

##### Collapse with Icon

Click the icon to toggle the collapse.

Read Less Read More
This is some detailed content that gets revealed when you click "Read More" and hidden when you click "Read Less". Customize this text as needed for your application.

    <!-- Collapsible Trigger Area with Remix Icon -->
    <div class="d-flex flex-wrap gap-5 align-items-center mb-3">
        <button class="btn btn-primary icon-btn custom-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">
            <span class="icon-on">
                <i class="ri-subtract-line"></i>
            </span>
            <span class="icon-off">
                <i class="ri-add-line"></i>
            </span>
        </button>
        <div class="custom-toggle fw-semibold d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent" role="button">
            <span class="icon-on">
                Read Less
                <i class="ri-arrow-up-s-line ms-2"></i>
            </span>
            <span class="icon-off">
                Read More
                <i class="ri-arrow-down-s-line ms-2"></i>
            </span>
        </div>
    </div>
    <!-- Collapsible Content Area -->
    <div class="collapse show" id="collapseContent">
        <div class="card card-body mb-0">
            This is some detailed content that gets revealed when you click "Read More" and hidden when you click "Read Less". Customize this text as needed for your application.
        </div>
    </div>

##### Controlling Multiple Collapses

You can use a `<button>` or `<a>` to control multiple collapsible elements at once by using the same `data-bs-target` or `href` attribute. Similarly, a single `<button>` or `<a>` can control multiple collapsible elements if you use the same attribute value for all.

Toggle First Section
This is the content for the first section. It’s hidden by default and will be shown when the appropriate button is clicked.
This is the content for the second section. It’s hidden by default and will be shown when the appropriate button is clicked.

    <!-- Collapsible Trigger Buttons -->
    <div class="d-inline-flex gap-2 mb-3">
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Toggle First Section</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Toggle Second Section</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo">Toggle Both Sections</button>
    </div>

    <!-- Collapsible Content Sections -->
    <div class="row">
        <div class="col">
            <div class="collapse show multi-collapse" id="collapseOne">
                <div class="card card-body mb-0">
                    This is the content for the first section. It’s hidden by default and will be shown when the appropriate button is clicked.
                </div>
            </div>
        </div>
        <div class="col">
            <div class="collapse show multi-collapse" id="collapseTwo">
                <div class="card card-body mb-0">
                    This is the content for the second section. It’s hidden by default and will be shown when the appropriate button is clicked.
                </div>
            </div>
        </div>
    </div>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark