I want to use the bootstrap display font, but in a smaller size. I'm looking for a way to expand on the predefined sizes (1 through 6 | 5 through 2.5rem).
I tried adding to the set of values that the Bootstrap website says you can configure:
<body>
<h1 class="display-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<h1 class="display-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<script>
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem,
7: 2rem, //I added 7 through 10
8: 1.5rem,
9: 1rem,
10: 0.5rem,
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
</script>
</body>
This didn't work. The h1 with the display-10 class just shows up as a display-5 class h1. Also, display-5 and display-6 appear to be the exact same; this is unrelated, but I did notice it.
I was expecting my display-10 class h1 to appear smaller, but it didn't. Due to this, I tried an h1 with the class of display-9;
<body>
<h1 class="display-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<h1 class="display-9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<script>
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem,
7: 2rem, //I added 7 through 10
8: 1.5rem,
9: 1rem,
10: 0.5rem,
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
</script>
</body>
Similar results- no change in size, like I was expecting.
I assume that I would either have to edit the javascript directly inside of the bootstrap scripts themselves, or it just doesn't let you change this; if so, it wouldn't make sense to say "Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height" on the Bootstrap official website.
EXTRA:
Here are the links and scripts I used for Bootstrap:
<head>
<!-- RWD tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Stylesheet link tags -->
<link rel="stylesheet" type="text/CSS" href="Personal.css">
<link rel="stylesheet" href=".3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="+Symbols+Outlined" rel="stylesheet" /> <!-- Material symbols are just an extra thing I've added in case I need them -->
</head>
<body>
<script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=".3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
In case it matters, I use Skill Struck to code; it's for school.
I want to use the bootstrap display font, but in a smaller size. I'm looking for a way to expand on the predefined sizes (1 through 6 | 5 through 2.5rem).
I tried adding to the set of values that the Bootstrap website says you can configure:
<body>
<h1 class="display-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<h1 class="display-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<script>
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem,
7: 2rem, //I added 7 through 10
8: 1.5rem,
9: 1rem,
10: 0.5rem,
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
</script>
</body>
This didn't work. The h1 with the display-10 class just shows up as a display-5 class h1. Also, display-5 and display-6 appear to be the exact same; this is unrelated, but I did notice it.
I was expecting my display-10 class h1 to appear smaller, but it didn't. Due to this, I tried an h1 with the class of display-9;
<body>
<h1 class="display-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<h1 class="display-9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </h1>
<script>
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem,
7: 2rem, //I added 7 through 10
8: 1.5rem,
9: 1rem,
10: 0.5rem,
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
</script>
</body>
Similar results- no change in size, like I was expecting.
I assume that I would either have to edit the javascript directly inside of the bootstrap scripts themselves, or it just doesn't let you change this; if so, it wouldn't make sense to say "Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height" on the Bootstrap official website.
EXTRA:
Here are the links and scripts I used for Bootstrap:
<head>
<!-- RWD tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Stylesheet link tags -->
<link rel="stylesheet" type="text/CSS" href="Personal.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <!-- Material symbols are just an extra thing I've added in case I need them -->
</head>
<body>
<script src="https://code.jquery/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
In case it matters, I use Skill Struck to code; it's for school.
Share Improve this question asked Mar 15 at 9:40 max.htmlmax.html 13 bronze badges1 Answer
Reset to default 0Why It's Not Working
Bootstrap uses Sass to compile its CSS. The $display-font-sizes map is used during Sass compilation, not at runtime. Modifying it inside a tag or directly in HTML won't have any effect.
You're using the Bootstrap CSS from a CDN (https://stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css), which is already compiled. This means you can't change Sass variables unless you recompile Bootstrap yourself.
Since you're using Bootstrap via CDN, the easiest solution is to manually define your custom classes in your own CSS file.
CSS
.display-7 {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
}
.display-8 {
font-size: 1.5rem;
font-weight: 300;
line-height: 1.2;
}
.display-9 {
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
}
.display-10 {
font-size: 0.5rem;
font-weight: 300;
line-height: 1.2;
}
Ensure CSS Loads in Correct Order Make sure your custom stylesheet is loaded after Bootstrap's CDN:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="fontsize.css">
Use the Custom Classes HTML
<h1 class="display-6">Display 6 Text</h1>
<h1 class="display-10">Display 10 Text</h1>
Why This Works This approach doesn't require modifying Bootstrap's internal Sass variables. Your custom styles will override or extend Bootstrap's defaults because they load after the Bootstrap CSS. Using standard CSS ensures compatibility, even with older Bootstrap versions like 4.3.1. html