Bootstrap 5 Offcanvas SASS

Bootstrap 5 Offcanvas SASS can be used to change the default values provided for the Offcanvas by customizing scss file of bootstrap5.

SASS variables of Offcanvas:

$offcanvas-color: This variable provides the color of the text on the offcanvas. By default, it is null.
$offcanvas-bg-color: This variable provides the background color of the offcanvas. By default, it is white.
$offcanvas-padding-y: This variable provides the top padding and bottom padding of the content in the offcanvas. By default, it is 1rem.
$offcanvas-padding-x: This variable provides the left padding and right padding of the content in the offcanvas. By default, it is 1rem.
$offcanvas-horizontal-width: This variable provides the horizontal width of the offcanvas. By default, it is 400px.
$offcanvas-transition-duration: This variable provides the transition duration of the offcanvas to show and hide on toggling the button. By default, it is 0.3 seconds.
$offcanvas-border-width: This variable provides the border width of the offcanvas. By default, it is 1px.
$offcanvas-border-color: This variable provides the border color of the offcanvas. By default, it is translucent black.
$offcanvas-title-line-height: This variable provides the line height of the offcanvas title. By default, it is 1.5.
$offcanvas-vertical-height: This variable provides the vertical height of the offcanvas. By default, it is 30vh.
$offcanvas-box-shadow: This variable provides the box shadow of the offcanvas. By default, it is black in color with horizontal shadow width of 0.125rem and vertical shadow width of 0.25rem.

Steps to override scss of Bootstrap:

Step 1: Install bootstrap using 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 converted file

Syntax:

$offcanvas-*:value;
    ...
@import "./node_modules/bootstrap/scss/bootstrap"

Note: The * can be replaced with the variables described above

Example 1: In this example, we make use of some of the above variables of Offcanvas and assign new values by overriding the default css.

custom.scss

SCSS

$offcanvas-color:green; 

$offcanvas-padding-y:2rem; 

$offcanvas-padding-x:3rem; 

$offcanvas-horizontal-width:300px; 

$offcanvas-border-color:green; 

$offcanvas-border-width:6px; 

@import "../node_modules/bootstrap/scss/bootstrap.scss"

CSS file created after conversion

custom.css

CSS

.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { 

    --bs-offcanvas-zindex: 1045; 

    --bs-offcanvas-width: 300px; 

    --bs-offcanvas-height: 30vh; 

    --bs-offcanvas-padding-x: 3rem; 

    --bs-offcanvas-padding-y: 2rem; 

    --bs-offcanvas-color: green; 

    --bs-offcanvas-bg: #fff; 

    --bs-offcanvas-border-width: 6px; 

    --bs-offcanvas-border-color: green; 

    --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
}

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 Offcanvas variables</title> 

    <link rel="stylesheet" href="scss/main.css"> 

    <script src= 

"node_modules/bootstrap/dist/js/bootstrap.js"> 

    </script> 

</head> 

<body style="text-align: center;"> 

    <div class="container"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <div class="offcanvas offcanvas-start" 

             id="offcanvas1"> 

            <div class="offcanvas-header"> 

                <h4 class="offcanvas-title"> 

                    Offcanvas Header 

                </h4> 

                <button type="button" class="btn-close text-reset" 

                        data-bs-dismiss="offcanvas"

                    aria-label="Close"></button> 

            </div> 

            <div class="offcanvas-body"> 

                <p> 

                    Topics to learn include DSA, Java, Python,  

                    Artificial Intelligence, Machine learning  

                    and more 

                </p> 

            </div> 

        </div> 

        <button class="btn btn-primary" type="button" 

                data-bs-toggle="offcanvas" 

                data-bs-target="#offcanvas1"> 

            Offcanvas 

        </button> 

    </div> 

</body> 

</html>

Output:

Output

Example 2: In this example, make use of some of the above variables of Offcanvas and assign new values by overriding the default css.

custom.scss

CSS

$offcanvas-bg-color:green; 

$offcanvas-color:white; 

$offcanvas-title-line-height:4; 

$offcanvas-transition-duration: 2s; 

@import "../node_modules/bootstrap/scss/bootstrap.scss"

CSS file created after conversion

custom.css

CSS

.offcanvas { 

    position: fixed; 

    bottom: 0; 

    z-index: var(--bs-offcanvas-zindex); 

    display: flex; 

    flex-direction: column; 

    max-width: 100%; 

    color: var(--bs-offcanvas-color); 

    visibility: hidden; 

    background-color: var(--bs-offcanvas-bg); 

    background-clip: padding-box; 

    outline: 0; 

    transition: transform 2s ease-in-out; 
} 
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { 

    --bs-offcanvas-zindex: 1045; 

    --bs-offcanvas-width: 400px; 

    --bs-offcanvas-height: 30vh; 

    --bs-offcanvas-padding-x: 1rem; 

    --bs-offcanvas-padding-y: 1rem; 

    --bs-offcanvas-color: white; 

    --bs-offcanvas-bg: green; 

    --bs-offcanvas-border-width: 1px; 

    --bs-offcanvas-border-color: var(--bs-border-color-translucent); 

    --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 
} 
.offcanvas-title { 

    margin-bottom: 0; 

    line-height: 4; 
}

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 Offcanvas SASS</title> 

    <link rel="stylesheet" href="./custom.css"> 

    <script src= 

"node_modules/bootstrap/dist/js/bootstrap.js"> 

    </script> 

</head> 

<body style="text-align:center;"> 

    <div class="container"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <div class="offcanvas offcanvas-start" 

             id="offcanvas1"> 

            <div class="offcanvas-header"> 

                <h4 class="offcanvas-title"> 

                    Offcanvas Header 

                </h4> 

                <button type="button" class="btn-close text-reset" 

                        data-bs-dismiss="offcanvas"

                    aria-label="Close"></button> 

            </div> 

            <div class="offcanvas-body"> 

                <p> 

                    Topics to learn include DSA, Java, Python,  

                    Artificial Intelligence, Machine learning  

                    and more 

                </p> 

            </div> 

        </div> 

        <button class="btn btn-primary" type="button" 

                data-bs-toggle="offcanvas" 

                data-bs-target="#offcanvas1"> 

                Offcanvas 

        </button> 

    </div> 

</body> 

</html>

Output:

Output

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#sass

Article Tags :

Bootstrap

Technical Scripter

Web Technologies

Bootstrap-5

Technical Scripter 2022