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 3s ease;
@import "./node_modules/bootstrap/scss/bootstrap"
CSS file created after conversion
custom.css
.collapsing {
height: 0;
overflow: hidden;
transition: height 3s 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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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
$transition-collapse: height 3s ease-in;
@import "./node_modules/bootstrap/scss/bootstrap"
CSS file created after conversion
custom.css
.collapsing {
height: 0;
overflow: hidden;
transition: height 3s 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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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:
Reference: