Bootstrap 5 Offcanvas SASS

Last Updated : 01 Aug, 2024

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:

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:

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

Bootstrap 5 Offcanvas Usage Events

reshmah

Improve

Article Tags :

Bootstrap 5 Offcanvas SASS

Similar Reads

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Thank You!

What kind of Experience do you want to share?