Bootstrap 5 Typography SASS
Last Updated :
30 Jan, 2023
Bootstrap 5 Typography SASS can be used to change the default values provided for the headings, body text, lists and more typography by customizing scss files.
SASS variables of Typography:
- $headings-color: This variable provides the text color of the headings. By default, it is null.
- $headings-font-family: This variable provides the font family of the headings. By default, it is null.
- $headings-font-style: This variable provides the font style of the headings. By default, it is null.
- $headings-font-weight: This variable provides the font weight of the headings. By default, it is 500.
- $lead-font-size: This variable provides the font size of the lead. By default, it is 1.25.
- $lead-font-weight: This variable provides the font weight of the lead. By default, it is 300.
- $small-font-size: This variable provides the font size of the small element. By default, it is 0.875em.
- $sub-sup-font-size: This variable provides the font size of the superscript and subscript. By default, it is 0.75em.
- $text-muted: This variable provides the text color of the muted text. By default, it is gray color.
- $blockquote-font-size: This variable provides the font size of the blockquote. By default, it is 1.25.
- $blockquote-footer-color: This variable provides the color of the blockquote footer. By default, it is gray color.
- $blockquote-footer-font-size: This variable provides the font size of the blockquote footer. By default, it is 0.875em.
- $hr-color: This variable provides the color of the horizontal line. By default, the color is inherited from its parent element.
- $hr-opacity: This variable provides the opacity of the horizontal line. By default, the opacity is 0.25.
- $mark-padding: This variable provides the padding of the content inside mark tag. By default, it is 0.2em.
- $mark-bg: This variable provides the background color of the content inside mark tag. By default, it is #fcf8e3.
- $list-inline-padding: This variable provides the padding of the list inline. By default, it is 0.5rem.
Steps to override scss:
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.
$SASS_variable: 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: The custom scss file name is “custom.scss” and “custom.css” is converted file.
Syntax:
$headings-color:value
@import "./node_modules/bootstrap/scss/bootstrap"
Example 1: In this example, we make use of the $headings-color, $headings-font-family, $headings-font-style, $headings-font-weight, $lead-font-size, $lead-font-weight, $small-font-size variables.
In the scss file, the color of the headings is changed to “green”, the font family of the headings is changed to “Lucida”, the font style of headings is changed to “italic”, the font weight of headings is changed to 700, the font size of the lead is changed to 30px, the font weight of the lead is changed to 650, the font size of the small element is changed to 1.5rem.
custom.scss:
CSS
$headings-color:green;
$headings-font-family:Lucida;
$headings-font-style:italic;
$headings-font-weight:700;
$lead-font-size:30px;
$lead-font-weight:650;
$small-font-size:1.5rem;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css:
CSS
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-family: Lucida;
font-style: italic;
font-weight: 700;
line-height: 1.2;
color: green;
}
.lead {
font-size: calc(1.3125rem + 0.75vw);
font-weight: 650;
}
small, .small {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
small, .small {
font-size: 1.5rem;
}
}
|
HTML Code:
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 Typography SASS</title>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="customStyle.css">
<script src=
</script>
</head>
<body style="text-align:center;">
<div class="container" style=
"width:700px;margin:auto;">
<h1 class="text-success">GeeksforGeeks</h1>
<h5 class="text-dark">Typography</h5>
<p>Headings</p>
<h1>Data Structure and Algorithms</h1>
<h2>Data Structure and Algorithms</h2>
<h3>Data Structure and Algorithms</h3>
<h4>Data Structure and Algorithms</h4>
<h5>Data Structure and Algorithms</h5>
<p class="lead">This is a lead sentence.</p>
<small>Small sentence</small>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Typography SASS
Example 2: In this example, we make use of the $sub-sup-font-size, $text-muted, $blockquote-font-size, $blockquote-footer-color, $blockquote-footer-font-size,$hr-color, $hr-opacity, $mark-padding, $mark-bg, $list-inline-padding variables.
In the scss file, the font size of the subscript and superscript is changed to 1.2rem, the text color of the muted text is changed to green, the font size of the blockquote is changed to 30px, the color of the blockquote footer is changed to green, the font size of the blockquote footer is changed to 20px, the color of horizontal line is changed to black, the opacity of the horizontal line is changed to 1, the padding of the mark element content is changed to 0.7em, the background color of the mark element is changed to green, the padding of the list inline is changed to 8rem.
custom.scss
CSS
$sub-sup-font-size: 1.2rem;
$text-muted: green;
$blockquote-font-size:30px;
$blockquote-footer-color:green;
$blockquote-footer-font-size:20px;
$hr-color:black;
$hr-opacity:1;
$mark-padding:0.7em;
$mark-bg:green;
$list-inline-padding:8rem;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
CSS
.blockquote {
margin-bottom: 1rem;
font-size: calc(1.3125rem + 0.75vw);
}
.blockquote-footer {
margin-top: -1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
color: green;
}
.list-inline-item:not(:last-child) {
margin-right: 8rem;
}
hr {
margin: 1rem 0;
color: black;
border: 0;
border-top: 1px solid;
opacity: 1;
}
mark, .mark {
padding: 0.7em;
background-color: var(--bs-highlight-bg);
}
sub,
sup {
position: relative;
font-size: 1.2rem;
line-height: 0;
vertical-align: baseline;
}
.text-muted {
--bs-text-opacity: 1;
color: green !important;
}
|
HTML Code:
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 Typography SASS</title>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="customStyle1.css">
<script src=
</script>
</head>
<body style="text-align:center;">
<div class="container" style=
"width:700px;margin:auto;">
<h1 class="text-success">GeeksforGeeks</h1>
<h5 class="text-dark">Typography</h5>
<div class="p-2">
<p>(a+b)<sup>square</sup></p>
</div>
<div>
<p>(a+b)<sub>square</sub></p>
</div>
<div class="card">
This card element has a muted text.
<p class="text-muted">
This is a Muted text
</p>
</div>
<blockquote class="blockquote">
<p>This is a blockquote...</p>
<footer class="blockquote-footer">
blockquote footer
</footer>
</blockquote>
<hr>
<p>Java, Python, C, C++,
<mark>Javascript,</mark> C#
</p>
<ul class="list-inline">
<li class="list-inline-item">
HTML5, CSS3
</li>
<li class="list-inline-item">
Bootstrap
</li>
<li class="list-inline-item">
jQuery
</li>
</ul>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Typography SASS
Reference: https://getbootstrap.com/docs/5.0/content/typography/#sass
Share your thoughts in the comments
Please Login to comment...