Bootstrap5 Figures SASS

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 "https://www.geeksforgeeks.org/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 "https://www.geeksforgeeks.org/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:

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>

Output:

Reference:

https://getbootstrap.com/docs/5.0/content/figures/#sass

Explore