Add new utilities with Bootstrap 5

Question

Following the B5 new documentation, this is how you are supposed to add new utilities with the new utilities API. I have not been the get the new output though.

exemple:

@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor
      responsive: true,
      values: auto pointer grab,
    )
  )
);

my file:

@import "bootstrap.scss";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

I need to import bootstrap.scss because $utilities is undefined otherwise
the goal is to add a new property to make the button rounded.simple example to test out the new API. not working though
I am using the https://github.com/twbs/bootstrap-npm-starter to compile the scss files: the src is starter.scss and the output is starter.css

I cannot find the new property button-rounded

Carol Skelly · Accepted Answer · 2020-12-28T14:59:17.620

10

When making Bootstrap SASS customizations, the @import "bootstrap" should go after the changes. Also, the utilities file requires the variables file, and the variables file requires the functions file, so you must import all 3 before the change...

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

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

@import "bootstrap";

Demo

Since Bootstrap 5 is currently beta, I've submitted an issue report for this.

edited Dec 28 '20 at 14:59

answered Dec 20 '20 at 13:30

Carol Skelly

351,302
90
710
624

2

I just found this out myself the hard way that the main bootstrap import needs to come after. It would be nice if the docs mentioned that. And since they are using `@import` instead of `@use` we are basically importing those 3 files `functions`, `variables`, and `utilities` twice bc the main `@import "bootstrap"` also imports those 3 files which unnecessarily increases the size of the css. Is this the way they intended the utilities API to be used? Per SASS "Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output" – RcoderNY May 05 '21 at 02:54
I have been wondering the same thing. All the answers I can find say import bootstrap after but like you said it should be unnecessary to reimport everything again. – AndrewBrntt Jan 13 '22 at 01:10
That's how SASS works.... it's not a bootstrap thing – Carol Skelly Jan 13 '22 at 13:35

score 2 · Answer 2 · answered Jun 06 '21 at 18:25

Bootstrap 5.0.1, somehow no luck with map-merge($utilities ...)

but bootstrap has one more extension point: by overriding every $var default value

following will merge inside @import '~bootstrap/scss/utilities';

$utilities: (
  'event-type': (
    property: background-color,
    class: 'event-type', // <- somehow this required
    values: (
      commit: #BADA55,
      issue: #C0FFEE,
    ),
  ),
);

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/utilities/api';

This is the only thing I have found that works without reimporting all of bootstrap thanks! — AndrewBrntt, Jan 13 '22 at 01:50

score 2 · Answer 3 · answered May 14 '22 at 06:42

Since Bootstrap 5.2. update you need to proceed a little different. There is new maps file added.

If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2

and then:

$custom-colors: (
        "white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

and finally:

@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

and the rest.

How do you add a text color without having to add it to themecolors? — Newcoma, Dec 18 '22 at 18:01

score 1 · Answer 4 · answered May 25 '21 at 01:40

As of Bootstrap 5.0.1 this would be more appropriate:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

Importing "bootstrap" at the end is not required anymore.

score 0 · Answer 5 · answered Apr 28 '22 at 13:54

For bootstrap 5.1.3 from documentation

Don't forget @import "bootstrap/scss/maps"; as it's needed by utilities.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

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

Add new utilities with Bootstrap 5

5 Answers5

Linked

Related