rounded-* class Utilities for Responsive breakpoints

[alexsantaconcha]

I would like to add utilities through CSS thanks to the Bootstrap API v.5.

Specifically, add the classes:

rounded-lg
rounded-lg-0
rounded-lg-1
rounded-lg-2
rounded-lg-3
rounded-lg-4
etc......

To do this in normal bootstrap I just add this code responsive: true after importing the bootstrap/scss/utilities.scss file and it works correctly.

@import "../node_modules/bootstrap/scss/functions.scss";
@import "../node_modules/bootstrap/scss/variables.scss";
@import "../node_modules/bootstrap/scss/variables-dark.scss";
@import "../node_modules/bootstrap/scss/maps.scss";
@import "../node_modules/bootstrap/scss/mixins.scss";
@import "../node_modules/bootstrap/scss/root.scss";
@import "../node_modules/bootstrap/scss/utilities.scss";

$utilities: map-merge($utilities,
        ("rounded": (
                responsive: true,
                property: border-radius,
                class: rounded,
                values: (null: var(--#{$prefix}border-radius),
                    0: 0,
                    1: var(--#{$prefix}border-radius-sm),
                    2: var(--#{$prefix}border-radius),
                    3: var(--#{$prefix}border-radius-lg),
                    4: var(--#{$prefix}border-radius-xl),
                    5: var(--#{$prefix}border-radius-xxl),
                    circle: 50%,
                    pill: var(--#{$prefix}border-radius-pill))),
        ));

@import "../node_modules/bootstrap/scss/reboot.scss";
@import "../node_modules/bootstrap/scss/type.scss";
@import "../node_modules/bootstrap/scss/images.scss";
@import "../node_modules/bootstrap/scss/containers.scss";
@import "../node_modules/bootstrap/scss/grid.scss";
@import "../node_modules/bootstrap/scss/helpers.scss";
@import "../node_modules/bootstrap/scss/utilities/api.scss";

How could I add this functional or any other style directly from the child theme? Bootstrap is imported completely and not in parts. Thank you

[justinkruit]

That's a good point! To be honest; not sure why it has been done how it is now. Probably because we were new to all the SCSS parts. But thank you for bringing this to our attention, we will improve this very soon!

[justinkruit]

I've just created the following issue #640 so we can work on it.

[crftwrk]

#645