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 "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" > w3wiki </ h1 > < div class = "container" style = "width:200px;" > < figure class = "figure" > < img src = "https://media.w3wiki.net/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.25 rem; @import "./node_modules/bootstrap/scss/bootstrap.scss" ; |
CSS
.figure- caption { font-size : 1.25 rem; 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" >w3wiki</ h1 > < div class = "container" style = "width:200px;" > < figure class = "figure" > < img src = "https://media.w3wiki.net/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
Contact Us