Bootstrap5 Figures SASS

Last Updated : 16 Dec, 2022

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

Sass variables of Figures:

$figure-caption-color: This variable provides the font color of the caption of the figure. By default, it is gray color
$figure-caption-font-size: This variable provides the font size of the figure caption. By default, it is 0.875rem

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:

$figure-caption-color:value; // for changing color of caption
$figure-caption-font-size: value; // for changing font size
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, we make use of the $figure-caption-color variable. Here in the scss file, the figure caption color is changed to green color.

custom.scss

CSS

$figure-caption-color:green; 
@import "./node_modules/bootstrap/scss/bootstrap.scss";

CSS file created after conversion
custom.css

CSS

.figure-caption { 
  font-size: 0.875em; 
  color: green; 
}

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 Figures SASS 
      </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <link rel="stylesheet" 
          href="./custom.css"> 
    <script src= 
"node_modules/bootstrap/dist/js/bootstrap.js"> 
      </script> 
      <style> 
          .figure-caption { 
             font-size: 0.875em; 
             color: green; 
          } 
      </style> 
</head> 
<body> 
    <h1 class="text-success text-center"> 
          GeeksforGeeks 
      </h1> 
    <div class="container" 
         style="width:200px;"> 
        <figure class="figure"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221210020032/gfglogo2.png" 
                 class="figure-img img-fluid" 
                 alt="figure image"> 
            <figcaption class="figure-caption"> 
                  caption of image 
            </figcaption> 
        </figure> 
    </div> 
</body> 
</html> 

Output:

Output

Example 2: In this example, making use of the $figure-caption-font-size variable. Here in the scss file, the font size of the figure caption is changed to 20px.

custom.scss

CSS

$figure-caption-font-size: 1.25rem; 
@import "./node_modules/bootstrap/scss/bootstrap.scss";

custom.css

CSS

.figure-caption { 
  font-size: 1.25rem; 
  color: #6c757d; 
}

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 Figures SASS 
      </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <link rel="stylesheet" 
          href="./main.css"> 
    <script src= 
"node_modules/bootstrap/dist/js/bootstrap.js"> 
      </script> 
      <style> 
          .figure-caption { 
            font-size: 1.25rem; 
            color: #6c757d; 
          } 
      </style> 
</head> 
<body> 
    <h1 class="text-success text-center">GeeksforGeeks</h1> 
    <div class="container" 
         style="width:200px;"> 
        <figure class="figure"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221210020032/gfglogo2.png" 
                 class="figure-img img-fluid" 
                 alt="figure image"> 
            <figcaption class="figure-caption"> 
                caption of image 
            </figcaption> 
        </figure> 
    </div> 
</body> 
</html> 