0

I'm trying to add the "fs-7" css class to bootstrap5.

Following this guide: https://getbootstrap.com/docs/5.0/utilities/api/#modify-utilities

I came up with this custom scss file:

@import '../../../../../../node_modules/bootstrap/scss/bootstrap';


$h7-font-size: $font-size-base * 0.75; // $font-size-base is defined in _variables.scss


$utilities: map-merge(
        $utilities,
        (
            "font-size": map-merge(
                    map-get($utilities, "font-size"),
                    (
                        values: map-merge(
                                map-get(map-get($utilities, "font-size"), "values"),
                                (7: $h7-font-size),
                        ),
                    ),
            ),
        )
);

But when I call css class "fs-7" in my code, it's not recognized.

Am I doing something wrong?

ling
  • 9,545
  • 4
  • 52
  • 49
  • Does this answer your question? [How to Customize Bootstrap 5 Font Size for fs-\* class in SASS variables](https://stackoverflow.com/questions/68126285/how-to-customize-bootstrap-5-font-size-for-fs-class-in-sass-variables) – Carol Skelly Jul 23 '21 at 11:29

3 Answers3

1

Ok found it. Turns out you need to define the variable $utilities BEFORE you call the bootstrap files.

So this worked:

@import "../../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../../node_modules/bootstrap/scss/variables";
@import "../../../../../../node_modules/bootstrap/scss/utilities";



$h7-font-size: $font-size-base * 0.75;


$utilities: map-merge(
        $utilities,
        (
            "font-size": map-merge(
                    map-get($utilities, "font-size"),
                    (
                        values: map-merge(
                                map-get(map-get($utilities, "font-size"), "values"),
                                (7: $h7-font-size),
                        ),
                    ),
            ),
        )
);

@import '../../../../../../node_modules/bootstrap/scss/bootstrap';
ling
  • 9,545
  • 4
  • 52
  • 49
  • 1
    That works but you can shorten the code a lot. In between your imports, you could do something like this: `$custom-font-sizes: (7: $font-size-base * 0.75); $font-sizes: map-merge($font-sizes, $custom-font-sizes);` – Siddharth Bhansali Jul 23 '21 at 09:21
0

You will find the complete list of Bootstrap’s variables in bootstrap/scss/_variables.scss

Copy and paste variable and modify their values.

$font-sizes: (
  1: 2.25rem,
  2: 1.875rem,
  3: 1.5625rem,
  4: 1.25rem,
  5: 1.125rem,
  6: 1.025rem,
  7: 5rem,
);
@import '../node_modules/bootstrap/scss/bootstrap';
Tom
  • 21
  • 3
  • 2
    On Stack Overflow, the **how** is important, but a great part of the quality level of the site comes from the fact that people go to great lengths to explain the **why**. While a _code-only_ answer get the person who asked the question past whatever hurdle they might be facing, it doesn't do them or future visitors much good in the long run. See [Is there any benefit in code-only answers?](https://meta.stackexchange.com/a/148274/183937) – Steve Sep 18 '21 at 20:18
0

When I had a similar problem, what I did was download the bootstrap-utilities.css file from bootstrap's official website and place it in the css subfolder of my project. Apparently, I had been using utilities that could not be recognized.

Font size is included in those utilities.

Alice
  • 1