Open In App

Bootstrap 5 Collapse SASS

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 05 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads