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

Answer 1

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';

Answer 2

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.

Answer 3

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";

Answer 4

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.