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
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= 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= 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
Please Login to comment...