The map contains all our utilities and is later merged with your custom $utilities map, if present. The utility map contains a keyed list of utility groups which accept the following options:

All utility variables are added to the $utilities variable within our _utilities.scss stylesheet. Each group of utilities looks something like this:

Which outputs the following:

  1. .opacity-0 { opacity: 0; }
  2. .opacity-25 { opacity: .25; }
  3. .opacity-50 { opacity: .5; }
  4. .opacity-75 { opacity: .75; }
  5. .opacity-100 { opacity: 1; }

Use the class option to change the class prefix used in the compiled CSS:

  1. $utilities: (
  2.   "opacity": (
  3.     property: opacity,
  4.     class: o,
  5.     values: (
  6.       0: 0,
  7.       25: .25,
  8.       50: .5,
  9.       75: .75,
  10.       100: 1,
  11.     )
  12.   )
  13.  );

Output:

  1. .o-0 { opacity: 0; }
  2. .o-25 { opacity: .25; }
  3. .o-50 { opacity: .5; }
  4. .o-75 { opacity: .75; }
  5. .o-100 { opacity: 1; }

Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add state: hover and you’ll get .opacity-hover:hover in your compiled CSS.

  1. $utilities: (
  2.   "opacity": (
  3.     property: opacity,
  4.     class: opacity,
  5.     state: hover,
  6.     values: (
  7.       0: 0,
  8.       25: .25,
  9.       50: .5,
  10.       75: .75,
  11.       100: 1,
  12.     )
  13.   )
  14. );

Output:

Responsive utilities

Add the responsive boolean to generate responsive utilities (e.g., .opacity-md-25) across .

  1. $utilities: (
  2.   "opacity": (
  3.     property: opacity,
  5.     values: (
  6.       0: 0,
  7.       25: .25,
  8.       50: .5,
  9.       75: .75,
  10.     )
  11.   )
  12.  );

Output:

  1. .opacity-0 { opacity: 0; }
  2. .opacity-25 { opacity: .25; }
  3. .opacity-50 { opacity: .5; }
  4. .opacity-75 { opacity: .75; }
  5. .opacity-100 { opacity: 1; }
  7. @media (min-width: 576px) {
  8.   .opacity-sm-0 { opacity: 0; }
  9.   .opacity-sm-25 { opacity: .25; }
  10.   .opacity-sm-50 { opacity: .5; }
  11.   .opacity-sm-75 { opacity: .75; }
  12.   .opacity-sm-100 { opacity: 1; }
  13. }
  15. @media (min-width: 768px) {
  16.   .opacity-md-0 { opacity: 0; }
  17.   .opacity-md-25 { opacity: .25; }
  18.   .opacity-md-50 { opacity: .5; }
  19.   .opacity-md-75 { opacity: .75; }
  20.   .opacity-md-100 { opacity: 1; }
  21. }
  23. @media (min-width: 992px) {
  24.   .opacity-lg-0 { opacity: 0; }
  25.   .opacity-lg-25 { opacity: .25; }
  26.   .opacity-lg-50 { opacity: .5; }
  27.   .opacity-lg-75 { opacity: .75; }
  28.   .opacity-lg-100 { opacity: 1; }
  29. }
  31. @media (min-width: 1200px) {
  32.   .opacity-xl-0 { opacity: 0; }
  33.   .opacity-xl-25 { opacity: .25; }
  34.   .opacity-xl-50 { opacity: .5; }
  35.   .opacity-xl-75 { opacity: .75; }
  36.   .opacity-xl-100 { opacity: 1; }
  37. }
  39. @media (min-width: 1400px) {
  40.   .opacity-xxl-0 { opacity: 0; }
  41.   .opacity-xxl-25 { opacity: .25; }
  42.   .opacity-xxl-50 { opacity: .5; }
  43.   .opacity-xxl-75 { opacity: .75; }
  44.   .opacity-xxl-100 { opacity: 1; }
  45. }

Override existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:

  1. $utilities: (
  2.   "overflow": (
  3.     responsive: true,
  4.     property: overflow,
  5.     values: visible hidden scroll auto,
  6.   ),
  7. );

Print utilities

Enabling the print option will also generate utility classes for print, which are only applied within the @media print { ... } media query.

  1. $utilities: (
  2.     property: opacity,
  3.     print: true,
  4.     values: (
  5.       0: 0,
  6.       25: .25,
  8.       75: .75,
  9.       100: 1,
  10.     )
  11.   )
  12.  );

Output:

New utilities can be added to the default $utilities map with a map-merge. Make sure our _utilities.scss is imported first, then use the map-merge to add your additional utilities. For example, here’s how to add a responsive cursor utility with three values.

  1. @import "bootstrap/scss/utilities";
  3. $utilities: map-merge(
  4.   $utilities,
  5.   (
  6.     "cursor": (
  7.       property: cursor,
  8.       class: cursor
  9.       responsive: true,
  10.       values: auto pointer grab,
  11.     )
  12.   )
  13. );

Modify utilities

Modify existing utilities in the default $utilities map with map-get and map-merge functions. In the example below, we’re adding an additional value to the width utilities. Start with an initial map-merge and then specify which utility you want to modify. From there, fetch the nested "width" map with map-get to access and modify the utility’s options and values.

  1. @import "bootstrap/scss/utilities";
  3. $utilities: map-merge(
  4.   $utilities,
  5.   (
  6.     "width": map-merge(
  7.       map-get($utilities, "width"),
  8.       (
  9.         values: map-merge(
  10.           map-get(map-get($utilities, "width"), "values"),
  11.           (10: 10%),
  12.         ),
  13.       ),
  14.     ),
  15.   )
  16. );

Remove any of the default utilities by setting the group key to null. For example, to remove all our width utilities, create a $utilities map-merge and add "width": null within.

  1. @import "bootstrap/scss/utilities";
  3. $utilities: map-merge(
  4.   $utilities,
  5.   (
  6.     "width": null
  7.   )
  8. );

Remove utility in RTL

Some edge cases make , such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the rtl option to false:

  1. $utilities: (
  2.   "word-wrap": (
  3.     property: word-wrap word-break,
  4.     class: text,
  5.     values: (break: break-word),
  6.     rtl: false
  7.   ),
  8. );

Output:

This doesn’t output anything in RTL, thanks to the RTLCSS remove control directive.