Bootstrap 5 Carousel SASS
Last Updated :
13 Jan, 2023
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 : 5 rem;
.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 : 5 rem;
height : 5 rem;
}
|
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 =
</ 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 =
style = "height:25rem;"
class = "d-block w-100" alt = "gfgimg" >
</ div >
< div class = "carousel-item h-50" >
< img src =
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 =
</ 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 =
style = "height:25rem;" class = "d-block w-100" >
</ div >
< div class = "carousel-item h-50" >
< img src =
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 >
|
Output:
References: https://getbootstrap.com/docs/5.0/components/carousel/#sass
Share your thoughts in the comments
Please Login to comment...