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
$transition-collapse: height 3 s ease;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
.collapsing { height : 0 ;
overflow : hidden ;
transition: height 3 s ease;
} |
index.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 =
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
$transition-collapse: height 3 s ease-in;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
.collapsing { height : 0 ;
overflow : hidden ;
transition: height 3 s ease-in;
} |
index.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 =
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:
Reference:
https://getbootstrap.com/docs/5.0/components/collapse/#sass