<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>

<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>

<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>

<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>

<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>

<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>

<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>

<div class="accordion accordion-primary 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>

<!-- 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>

<!-- 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>