Bootstrap 5 Collapse SASS

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

👁 Image

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 file created after conversion

custom.css

index.html

Output:

👁 Image

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 file created after conversion

custom.css

index.html

Output:

👁 Image

Reference:

https://getbootstrap.com/docs/5.0/components/collapse/#sass