Breakpoints for fs-1, fs-2.... classes

[Levan777]

Guys, I'm trying to add fs-{breakpoint}-n classes (for example fs-md-2) using this code:

$utilities: map-merge( $utilities, ( "fs": map-merge( map-get($utilities, "fs"), ( responsive: true ), ), ) ) !default;

Seems like I'm missing something. Can you help? It's not generating anything...

[Levan777]

Is this community alive?

[mdo]

Your problem lies in how you're referencing the utility itself. If you look at the utility source code for font-size, you'll see it's named after the property and not the shorthand notation

https://github.com/twbs/bootstrap/blob/416f4905f13c2ca3096343e0a5a4934c8c0ced3f/scss/_utilities.scss#L461:L466

Check the docs again for how to modify the utilities maps.

https://getbootstrap.com/docs/5.2/utilities/api/#enable-responsive

[Levan777]

Well, this is my bootstrap.scss file:

/*!
 * Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "custom-variables";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";
@import "custom-functions";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack




and this is my custom-functions.scss file:

$utilities: map-merge(
  $utilities,
  (
    "font-size": map-merge(
      map-get($utilities, "font-size"),
      ( responsive: true ),
    ),
  )
) !default;

Expecting to see compiled fs-1 classes but with breakpoints like fs-md-1 and so on...

[mdo]

I’m no longer at my computer, but try removing the !default flag.

[bradmkjr]

What I did that worked, was put the additional code before utilities/api entry, based on the instructions here https://getbootstrap.com/docs/5.2/utilities/api/#enable-responsive

@import "~bootstrap/scss/utilities";
....
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";

// Helpers
@import "~bootstrap/scss/helpers";

$utilities: map-merge(
  $utilities,
  (
    "font-size":
      map-merge(
        map-get($utilities, "font-size"),
        (
          responsive: true
        )
      )
  )
);

// Utilities
@import "~bootstrap/scss/utilities/api";

[macrodesignuk]

I'm late to the party, but I think I've found a bug or issue with this.

Also discussed here: https://stackoverflow.com/questions/78707027/bootstrap-5-3-responsive-font-wrong-priority-order?noredirect=1#comment138790294_78707027

I'm using bootstrap 5.3 and have added the below to the scss to add responsive font.

The issue is that the fs-lg-3 is taking priority over the fs-xl-2 and the font for the wider screen is actually displaying the lg size rather than the xl or even xxl size.

My screen width 1920px, browser full screen.

SCSS Code:

$utilities: map-merge(
  $utilities,
  (
    "font-size":
      map-merge(
        map-get($utilities, "font-size"),
        (
          responsive: true
        )
      )
  )
);

I have the following html

<p class="fs-6 fs-md-4 fs-lg-3 fs-xl-2">Some Text</p>
The css for the element shows the following in the chrome developer tools.

@media (min-width: 1200px) {
    .fs-lg-3 {
        font-size: 1.75rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-md-4 {
        font-size: 1.5rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-xl-2 {
        font-size: calc(1.325rem + 0.9vw) !important;
    }
}

In the compiled css file for the respective min-width 1200px :

.fs-md-4 appears on line 11528
.fs-lg-3 appears on line 11537
.fs-xl-2 appears on line 10775
I suspect its because the fs-lg-3 appears later in the css file on line 11537, whereas fs-xl-2 is before it on 10775.

I'm expecting the fs-xl-2 class to change the font-size, but instead the fs-lg-3 takes priority on wider screens.

Another point is the fs-md-4 is being loaded at breakpoint 1200, shouldn't this be happening at min-width:768px?

The example of the bootstrap site shows different break points, not all being 1200.

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

[zhixXiang]

I'm late to the party, but I think I've found a bug or issue with this.

Also discussed here: https://stackoverflow.com/questions/78707027/bootstrap-5-3-responsive-font-wrong-priority-order?noredirect=1#comment138790294_78707027

I'm using bootstrap 5.3 and have added the below to the scss to add responsive font.

The issue is that the fs-lg-3 is taking priority over the fs-xl-2 and the font for the wider screen is actually displaying the lg size rather than the xl or even xxl size.

My screen width 1920px, browser full screen.

SCSS Code:

$utilities: map-merge(
  $utilities,
  (
    "font-size":
      map-merge(
        map-get($utilities, "font-size"),
        (
          responsive: true
        )
      )
  )
);

I have the following html

<p class="fs-6 fs-md-4 fs-lg-3 fs-xl-2">Some Text</p> The css for the element shows the following in the chrome developer tools.

@media (min-width: 1200px) {
    .fs-lg-3 {
        font-size: 1.75rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-md-4 {
        font-size: 1.5rem !important;
    }
}
@media (min-width: 1200px) {
    .fs-xl-2 {
        font-size: calc(1.325rem + 0.9vw) !important;
    }
}

In the compiled css file for the respective min-width 1200px :

.fs-md-4 appears on line 11528 .fs-lg-3 appears on line 11537 .fs-xl-2 appears on line 10775 I suspect its because the fs-lg-3 appears later in the css file on line 11537, whereas fs-xl-2 is before it on 10775.

I'm expecting the fs-xl-2 class to change the font-size, but instead the fs-lg-3 takes priority on wider screens.

Another point is the fs-md-4 is being loaded at breakpoint 1200, shouldn't this be happening at min-width:768px?

The example of the bootstrap site shows different break points, not all being 1200.

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Same. Any solution?