Bootstrap 5 Carousel SASS

Last Updated : 30 Jul, 2024

Bootstrap 5 Carousel SASS has a set of variables with default values that can be changed to customize the Carousel.

Bootstrap 5 Carousel Sass

Variables: Carousel variables have a default value that can be customized to make a new Carousel layout.

Default values of Carousel SASS variables

$carousel-control-color:                   $white;
$carousel-control-width:                  15%;
$carousel-control-opacity:                0.5;
$carousel-control-hover-opacity:      0.9;
$carousel-control-transition:            opacity .15s ease;
$carousel-indicator-width:               30px;
$carousel-indicator-height:              3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:              3px;
$carousel-indicator-opacity:             .5;
$carousel-indicator-active-bg:          $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:         opacity .6s ease;
$carousel-caption-width:                 70%;
$carousel-caption-color:                  $white;
$carousel-caption-padding-y:          1.25rem;
$carousel-caption-spacer:               1.25rem;
$carousel-control-icon-width:          2rem;
$carousel-transition-duration:         0.6s;
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color:          $black;
$carousel-dark-control-icon-filter:    invert(1) grayscale(100);

Description of Carousel SASS variables

$carousel-control-color: It is the color of the next and prev icons.
$carousel-control-width: It is the width of the next and prev icons.
$carousel-control-opacity: Opacity of next and prev icons.
$carousel-control-hover-opacity: Opacity when you hover next and prev icons.
$carousel-control-transition: Transition of the prev and next icons.
$carousel-indicator-width: Width of the indicators which are at bottom of the carousel.
$carousel-indicator-height: Height of the indicators which are at bottom of the carousel.
$carousel-indicator-hit-area-height: Height of the hit area of indicator.
$carousel-indicator-spacer: Space between indicators in the carousel.
$carousel-indicator-opacity: Opacity of the indicators in the carousel.
$carousel-indicator-active-bg: Background color when the indicator is active.
$carousel-indicator-active-opacity: Opacity of the indicator when it is active.
$carousel-indicator-transition: Transition of the indicators.
$carousel-caption-width: Width of the caption which is in the carousel.
$carousel-caption-color: Color of the caption in the carousel.
$carousel-caption-padding-y: Padding in y-axis for caption in the carousel.
$carousel-caption-spacer: Spacing between captions in the carousel.
$carousel-control-icon-width: Width of the prev and next icons in the carousel.
$carousel-transition-duration: Time is taken for the transition.
$carousel-dark-indicator-active-bg: Background color for the indicators when they are active in a dark theme.
$carousel-dark-caption-color: Color of the caption in the carousel in dark theme.
$carousel-dark-control-icon-filter: Icon filter in dark theme in the carousel.

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.

@import "../node_modules/bootstrap/scss/bootstrap.scss";
$variable_to_override: value;

Step 3: Convert the SCSS file to CSS using a live server extension.

Step 4: Include the CSS file in your HTML file.

<link rel="stylesheet" href="./assets/css/style.css">

Project Structure :

Syntax:

$carousel-control-icon-width: 5rem;
...

.carousel-control-prev-icon,
.carousel-control-next-icon {

  width: $carousel-control-icon-width;
  height: $carousel-control-icon-width;
  ...
}

'. . . ' refers to other variables from the list of variables.

Example 1: In this example, we have modified the $carousel-control-icon-width variable to 5rem from its default value of 2rem.

style.scss

SCSS

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

$carousel-control-icon-width: 5rem;

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: $carousel-control-icon-width;
    height: $carousel-control-icon-width;
}

style.css

CSS

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 5rem;
    height: 5rem;
}

index.html

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
    <title>Bootstrap 5 Carousel SASS</title>
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Carousel SASS</h2><br>
        <div id="carousel" class="carousel slide" 
             data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item h-50 active">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                         style="height:25rem;" 
                         class="d-block w-100" alt="gfgimg">
                </div>
                <div class="carousel-item h-50">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                         style="height:25rem;" 
                         class="d-block w-100" alt="gfgimg">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" 
                    data-bs-target="#carousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" 
                      aria-hidden="true">
                </span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" 
                    data-bs-target="#carousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" 
                      aria-hidden="true">
                </span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</body>
  
</html>

Output:

Example 2: In this example, we have modified variables to customize our carousel.

style.scss

SCSS

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

$carousel-control-width: 10%;
$carousel-control-opacity: .3;
$carousel-control-hover-opacity: 2;

.carousel-control-prev,
.carousel-control-next {
    width: $carousel-control-width;
    border: 3px solid black;

    &:hover,
    &:focus {
        opacity: $carousel-control-hover-opacity;
    }
}

style.css

CSS

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
    border: 3px solid black;
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
    opacity: 2;
}

index.html

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Carousel SASS</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Carousel SASS</h2><br>
        <div id="carousel" class="carousel slide" 
             data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item h-50 active">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                         style="height:25rem;" class="d-block w-100">
                </div>
                <div class="carousel-item h-50">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
                         style="height:25rem;" class="d-block w-100">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" 
                    data-bs-target="#carousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" 
                      aria-hidden="true">
                </span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" 
                    data-bs-target="#carousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" 
                      aria-hidden="true">
                </span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</body>
  
</html>