DocsAllOver Dark Themed Bootstrap 5 Accordion with Custom Icons Snippets

Dark Themed Bootstrap 5 Accordion with Custom Icons

April 11, 2025

Bootstrap, Bootstrap 5, Dark Mode, Responsive, Card, Accordion

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Themed Bootstrap 5 Accordion with Custom Icons</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
</head>

<body>
    <section id="accordion_1">
        <div class="container">
            <div class="heading">
                <h2>Bootstrap 5 Accordion</h2>
            </div>
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            What's the difference between compiling and interpreting code?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>
                                Compiled code is translated entirely into machine code before execution, leading to faster runtime.
                                Interpreted code is translated line by line as it's executed, offering more flexibility but often slower
                                performance.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Why is version control (like Git) so important for programmers?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>
                                Version control tracks changes to your code over time, allowing you to revert to previous states,
                                collaborate effectively with others, and manage different versions of your project without losing work.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            What does "API" stand for, and why is it useful?
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>
                                API stands for Application Programming Interface. It's a set of rules and protocols that allows
                                different software applications to communicate and exchange data with each other, enabling integration
                                and extending functionality.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            What is a common beginner mistake in programming?
                        </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>
                                A frequent error is off-by-one errors in loops or array/list indexing, where the loop runs one iteration
                                too many or too few, or an incorrect index is accessed, leading to unexpected behavior or crashes.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFive">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                            How do you approach debugging a piece of code that isn't working as expected?
                        </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                        data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <p>
                                Debugging often involves systematically examining the code, using print statements or debugging tools to
                                trace the program's execution, checking variable values, and isolating the section of code causing the
                                issue through a process of elimination.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

#accordion_1 {
    padding: 70px 0;
    background-color: #000;
}

#accordion_1 .heading h2 {
    color: #fff;
    margin-bottom: 50px;
}

#accordion_1 .accordion {
    max-width: 70%;
    margin: 0 auto;
}

#accordion_1 .accordion .accordion-button::after {
    content: "\f64d";
    font-family: bootstrap-icons !important;
    background: none;
    position: absolute;
    right: 0px;
    top: 0;
    background: #405df6;
    height: 100%;
    width: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    transform: none;
}

#accordion_1 .accordion .accordion-button:not(.collapsed)::after {
    content: "\f63b";
}

#accordion_1 .accordion .accordion-button,
#accordion_1 .accordion .accordion-body {
    padding-right: 45px;
    background-color: #000;
    box-shadow: none;
}

#accordion_1 .accordion .accordion-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    color: #fff;
}

#accordion_1 .accordion .accordion-item {
    border-radius: 0;
    margin-bottom: 20px;
    border: 1px solid #000;
    background-color: #000;
}

#accordion_1 .heading {
    text-align: center;
    margin-bottom: 30px;
}

#accordion_1 .accordion .accordion-body p {
    color: #fff;
    opacity: .8;
}

@media (max-width: 768px) {
    #accordion_1 .accordion {
        max-width: 100%;
    }
}

//Doesn't require any JS.

This Bootstrap 5 snippet implements a stylish and interactive accordion component featuring a dark theme and custom iconography, delivering an engaging and visually appealing way to present collapsible content sections.

Features:

Dark Theme: Offers a modern and sophisticated dark color scheme for the accordion.
Custom Icons: Integrates custom icons to visually represent and differentiate accordion items.
Toggleable Content: Allows users to easily expand and collapse sections to reveal or hide information.
Responsive Design: Ensures the accordion adapts seamlessly to various screen sizes, providing optimal viewing on all devices.
Easy Implementation: Offers a straightforward way to incorporate a visually enhanced accordion into any Bootstrap 5 project.

Implementation:

Include Bootstrap 5: Ensure Bootstrap 5 CSS and JS files are included in your project.
Structure the HTML: Create the accordion structure using Bootstrap 5's accordion and accordion-item classes.
Apply Dark Theme Classes: Utilize Bootstrap 5's background and text utility classes or custom CSS to achieve the dark theme.
Configure Accordion Behavior: Use Bootstrap 5's data attributes (data-bs-toggle, data-bs-target, etc.) to control the accordion's expand/collapse functionality.
Add Content: Populate each accordion item with the relevant headings and content.

This snippet enables you to create and display a visually striking and user-friendly accordion with a dark aesthetic and personalized icons, significantly enhancing the presentation of collapsible information within your Bootstrap 5 projects.

Latest Snippets

View All