Bootstrap 5 Accordion SASS

Bootstrap 5 Accordion SASS can be used to change the default values provided for the accordion by customizing scss file of bootstrap5.

SASS variables of Accordion:

• $accordion-padding-y: This variable provides the top padding and bottom padding of the accordion body and accordion button. By default, it is 1rem.
• $accordion-padding-x: This variable provides the left padding and right padding of the accordion body and accordion button. By default, it is 1.25rem.
• $accordion-color: This variable provides the text color in the accordion. By default, it is gray color.
• $accordion-bg: This variable provides the background color of the accordion. By default, it is white color.
• $accordion-border-width: This variable provides the border width of the accordion. By default, it is 1px.
• $accordion-border-color: This variable provides the border color of the accordion. By default, it is black with an opacity of 0.125.
• $accordion-border-radius: This variable provides the border radius of the accordion. By default, it is 0.375rem.
• $accordion-body-padding-y: This variable provides the top padding and bottom padding of the accordion body. By default, it is 1rem.
• $accordion-body-padding-x: This variable provides the left padding and right padding of the accordion body. By default, it is 1.25rem.
• $accordion-button-padding-y: This variable provides the top padding and bottom padding of the accordion button. By default, it is 1rem.
• $accordion-button-padding-x: This variable provides the left padding and right padding of the accordion button. By default, it is 1.25rem.
• $accordion-button-color: This variable provides the text color in the accordion button. By default, it is gray color.
• $accordion-button-bg: This variable provides the background color of the accordion button. By default, it is white color.
• $accordion-button-active-bg: This variable provides the background color of the accordion button which is active. By default, it is white color.
• $accordion-button-active-color: This variable provides the text color in the accordion button. By default, it is blue color.
• $accordion-button-focus-box-shadow: This variable provides the box shadow for the accordion button. By default, it is 0.
• $accordion-icon-width: This variable provides the width of the accordion icon. By default, it is 1.25rem.
• $accordion-icon-color: This variable provides the color of the accordion icon. By default, it is gray color.
• $accordion-icon-active-color: This variable provides the color of the active accordion icon. By default, it is blue color.
• $accordion-icon-transition: This variable provides the transition of the accordion icon. By default, it has transition duration of 0.2 second and transition timing function as ‘ease-in-out’.
• $accordion-icon-transform: This variable provides the transformation of the accordion icon. By default, it rotates to -180 degrees.

Steps to override scss:

Step 1: Install bootstrap using following command: 

npm i bootstrap

Step 2: Create your custom scss file and write the variable you want to override. Include the bootstrap scss file using import.

$class_to_override: values;
@import "node_modules/bootstrap/scss/bootstrap"

Step 3: Convert the file to CSS using live server extension.

Step 4: Include the converted scss file to your HTML file.

Project Structure: The custom scss file name is “custom.scss” and “custom.css” is the converted file

Syntax:

$accordion-padding-y:value
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, we make use of the $accordion-color,  $accordion-padding-y, $accordion-padding-x, $accordion-border-color, $accordion-border-width, $accordion-button-color, $accordion-button-bg, $accordion-button-active-bg, $accordion-button-active-color variables. 

In the scss file, the accordion color is changed to green color, the top and bottom padding of accordion is changed to 1.3rem, the left and right padding is changed to 2.5rem, the border color is changed to black, the border width is changed to 3.5px, the border radius is changed to 3rem, the text color of the accordion button is changed to white, the background color of the accordion button is changed to green color, the background color of the active accordion button is changed to white, the text color of the active accordion button is changed to green.

custom.scss

CSS

$accordion-color:green;
$accordion-padding-y:1.3rem;
$accordion-padding-x:2.5rem;
$accordion-border-color:black;
$accordion-border-width:3.5px;
$accordion-border-radius: 3rem;
$accordion-button-color:white;
$accordion-button-bg:green;
$accordion-button-active-bg: white;
$accordion-button-active-color:green;
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom.css

CSS

.accordion {
  --bs-accordion-color: white;
  --bs-accordion-bg: green;
  --bs-accordion-transition: color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 7rem;
  --bs-accordion-btn-padding-y: 2rem;
  --bs-accordion-btn-color: white;
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url(
 "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
        viewBox= '0 0 16 16'
        fill='white'%3e%3cpath fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708
           0L8 10.293l5.646-5.647a.5.5 0
           0 1 .708.708l-6 6a.5.5 0 0 1-.708
           0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 2rem;
  --bs-accordion-btn-icon-transform: rotate(180deg);
  --bs-accordion-btn-icon-transition: transform 2s ease-in-out;
  --bs-accordion-btn-active-icon: url(
  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 16 16'
        fill='black'%3e%3cpath fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708 0L8
           10.293l5.646-5.647a.5.5 0 0 1
           .708.708l-6 6a.5.5 0 0 1-.708
           0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 3.5rem;
  --bs-accordion-body-padding-y: 4.5rem;
  --bs-accordion-active-color: #0c63e4;
  --bs-accordion-active-bg: #e7f1ff;
}

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Accordion SASS</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <link rel="stylesheet" href="custom.css">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
<body class="m-3" style="text-align:center">
    <div class="container" style="width:700px;margin:auto;">
        <h1 class="text-success">GeeksforGeeks</h1>
        <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">
                        Topics
                    </button>
               </h2>
                <div id="collapseOne" class="accordion-collapse collapse show"
                    aria-labelledby="headingOne"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        DSA, Java, Python, Artificial Intelligence,
                        Competitive programming, Machine Learning and more
                   </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">
                        Programming languages
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse"
                    aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        C, C++, Java, Python, Golang, C#, Scala
                    </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">
                        Data structures
                    </button>
                </h2>
              <div id="collapseThree" class="accordion-collapse collapse"
                    aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Array, List, Stack, Queue, Tree, Graph and more
                </div>
              </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Output

Example 2: In this example, making use of the $accordion-color, $accordion-bg, $accordion-body-padding-y, $accordion-body-padding-x, $accordion-button-padding-y, $accordion-button-padding-x, $accordion-icon-width, $accordion-icon-color, $accordion-icon-active-color, $accordion-icon-transition, $accordion-icon-transform variables.

 In the scss file, the accordion color is changed to white, the background color of the accordion is changed to green, the top and bottom padding of the accordion body is changed to 4.5rem, the left and right padding of the accordion body is changed to 3.5rem, the top and bottom padding of the accordion button is changed to 2rem, the left and right padding of the accordion button is changed to 7rem, the width of the accordion icon is changed to 2rem, the color of the accordion icon is changed to white, the color of the active accordion icon is changed to black, the transition duration of the accordion icon is changed to 2 seconds with ‘ease-in-out’, the transformation of the accordion icon is changed to rotate in 180 degrees.

custom.scss

CSS

$accordion-color:white;
$accordion-bg:green;
$accordion-body-padding-y:4.5rem;
$accordion-body-padding-x:3.5rem;
$accordion-button-padding-y:2rem;
$accordion-button-padding-x:7rem;
$accordion-icon-width:2rem;
$accordion-icon-color:white;
$accordion-icon-active-color:black;
$accordion-icon-transition:transform 2s ease-in-out;
$accordion-icon-transform:rotate(180deg);
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom1.css

CSS

.accordion {
  --bs-accordion-color: white;
  --bs-accordion-bg: green;
  --bs-accordion-transition: color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0.375rem;
  --bs-accordion-inner-border-radius: calc(0.375rem - 1px);
  --bs-accordion-btn-padding-x: 7rem;
  --bs-accordion-btn-padding-y: 2rem;
  --bs-accordion-btn-color: white;
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url(
  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
        viewBox= '0 0 16 16'
        fill='white'%3e%3cpath fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708
            0L8 10.293l5.646-5.647a.5.5 0
            0 1 .708.708l-6 6a.5.5 0 0 1-.708
            0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 2rem;
  --bs-accordion-btn-icon-transform: rotate(180deg);
  --bs-accordion-btn-icon-transition: transform 2s ease-in-out;
  --bs-accordion-btn-active-icon: url(
  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 16 16'
        fill='black'%3e%3cpath fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708 0L8
            10.293l5.646-5.647a.5.5 0 0 1
            .708.708l-6 6a.5.5 0 0 1-.708
            0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 3.5rem;
  --bs-accordion-body-padding-y: 4.5rem;
  --bs-accordion-active-color: #0c63e4;
  --bs-accordion-active-bg: #e7f1ff;
}

index.html: The above CSS file “custom1.css” is included in this code.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Accordion SASS</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <link rel="stylesheet" href="custom1.css">
     <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
<body class="m-3" style="text-align:center;">
    <div class="container" style="width:700px;margin:auto;">
        <h1 class="text-success">GeeksforGeeks</h1>
        <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">
                  Topics
                </button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show"
                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    DSA, Java, Python, Artificial Intelligence,
                    Competitive programming, Machine Learning and more
                </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">
                        Programming languages
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse"
                    aria-labelledby="headingTwo"
                    data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        C, C++, Java, Python, Golang, C#, Scala
                    </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">
                        Data structures
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse"
                    aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Array, List, Stack, Queue, Tree, Graph and more
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Output

Reference: https://getbootstrap.com/docs/5.0/components/accordion/#sass