[Standalone Bootstrap 5 Utilities for Bootstrap 4] Use the new Bootstrap 5 utilities in your Bootstrap 4 project https://v5.getbootstrap.com/docs/5.0/utilities/api/ #bootstrap #utilities

app.scss

/**
 * -- Overwrite Bootstrap Vars
 */


$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px
);

// Bootstrap 5 utilities
$line-height-base:            1.5 !default;
$line-height-sm:              1.25 !default;
$line-height-lg:              2 !default;

// Extend Utilities
// @link https://v5.getbootstrap.com/docs/5.0/utilities/api/
$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

@import 'bootstrap.scss'; // Bootstrap core

// our utilities
@import "utilities";

utilities.scss

// Utilities from Bootstrap 5
// @link https://v5.getbootstrap.com/docs/5.0/utilities/api/
// @link https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
// @link https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
// @link https://codepen.io/localhorst/pen/vYGNvdK

$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
	(
		"line-height": (
			property: line-height,
			//responsive: true,
			class: lh,
			values: (
				1: 1,
				sm: $line-height-sm,
				base: $line-height-base,
				lg: $line-height-lg,
			)
		)
	),
	$utilities
);

// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix) {
	$values: map-get($utility, values);

	// If the values are a list or string, convert it into a map
	@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
		$values: zip($values, $values);
	}

	@each $key, $value in $values {
		$properties: map-get($utility, property);

		// Multiple properties are possible, for example with vertical or horizontal margins or paddings
		@if type-of($properties) == "string" {
			$properties: append((), $properties);
		}

		// Use custom class if present
		$property-class: if(
			map-has-key($utility, class),
			map-get($utility, class),
			nth($properties, 1)
		);
		$property-class: if($property-class == null, "", $property-class);

		$infix: if(
			$property-class == "" and str-slice($infix, 1, 1) == "-",
			str-slice($infix, 2),
			$infix
		);

		// Don't prefix if value key is null (eg. with shadow class)
		$property-class-modifier: if(
			$key,
			if($property-class == "" and $infix == "", "", "-") + $key,
			""
		);

		.#{$property-class + $infix + $property-class-modifier} {
			@each $property in $properties {
				// stylelint-disable-next-line declaration-no-important
				#{$property}: $value !important;
			}
		}
	}
}

// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
	// Generate media query if needed
	@include media-breakpoint-up($breakpoint) {
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		// Loop over each utility property
		@each $key, $utility in $utilities {
			// The utility can be disabled with `false`, thus check if the utility is a map first
			// Only proceed if responsive media queries are enabled or if it's the base media query
			@if type-of($utility) ==
				"map" and
				(map-get($utility, responsive) or $infix == "")
			{
				@include generate-utility($utility, $infix);
			}
		}
	}
}