Bootstrap 5 Collapse SASS

Last Updated : 23 Jul, 2025

Bootstrap5 Collapse SASS can be used to change the default value of transition duration and transition timing of the height property collapsible component.

SASS variables of Collapse:

$transition-collapse: This variable provides the transition duration and the transition timing function in which the transition is displayed. By default, the height property of the collapsible content is set with a transition duration of 0.35 seconds and the transition timing function as 'ease'.

Steps to override scss of Bootstrap:

Step 1: Install bootstrap using the following command:

npm i bootstrap

Step 2: Create your custom scss file and write the variable you want to override. Then 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 after the link tag of Bootstrap CSS.

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

Syntax:

$transition-collapse:value;
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, making use of the $transition-collapse variable. Here in the scss file, the transition duration is increased to 3 seconds and the transition timing function is set as default 'ease'.

custom.scss

CSS

$transition-collapse: height 3s ease;
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom.css

CSS

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 3s ease;
}

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 Collapse SASS</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <link rel="stylesheet" 
          href="./custom.css">
    <script src=
"./node_modules/bootstrap/dist/js/bootstrap.js">
      </script>
</head>
<body class="text-center">
    <h1 class="text-success">
              GeeksforGeeks
      </h1>
    <div class="container" 
         style="width:500px;">
        <button type="button" 
                class="btn" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapseId">
            Click here
        </button>
        <div class="collapse mt-3" 
             id="collapseId">
            <p>Java, C, C++, Javascript, Python, Kotlin, 
               Golang are programming languages.
          </p>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, making use of the $transition-collapse variable. Here in the scss file, the transition duration is increased to 3 seconds and the transition timing function is changed to 'ease-in'. The transition effect has slow start.

custom.scss

CSS

$transition-collapse: height 3s ease-in;
@import "./node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

custom.css

CSS

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 3s ease-in;
}

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 Collapse SASS</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <link rel="stylesheet" 
          href="./custom.css">
    <script src=
"node_modules/bootstrap/dist/js/bootstrap.js">
    </script>
</head>
<body class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
      </h1>
    <div class="container" 
         style="width:500px;">
        <button type="button" 
                class="btn" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapseId">
            Click here
        </button>
        <div class="collapse mt-3" 
             id="collapseId">
            <p>Java, C, C++, Javascript, Python, Kotlin,
               Golang are programming languages.
            </p>
        </div>
    </div>
</body>
</html>