Import Spacing (margin, padding etc) with SCSS in Bootstrap 5

user_14824953 0
Viewed 1793

I'm probably missing something obvious here - I'm trying to compile my Bootstrap using SCSS, so I can just select the files I need. Everything working great until I get to the margin and padding classes (e.g. mt-0). I thought these were part of the utilities.scss but apparently not, and I can't seem to track them down. Am I missing an obvious include here?

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


// Optional
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
bootstrap-5 sass
2 Answers

The mapping for the margin and padding classes (e.g. mt-0) is in the _utilities.scss [1] file however it generates the classes using the utilities/_api.scss [2] so you'll need below the utilities import:

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

References

[1] Utilities file (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)

[2] Utilities API file (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)

user_112917180

I just recently had the same issue. Every class worked except classes for margin/padding.

Now (From bootstrap V5.0) left is replaced by start and right is replaced by end.

So change mr-3 to me-3

Here's why

user_154683580
Related