Bootstrap 5: Can not use utilities

Question

I have updated my project from Bootstrap 4.5 to Bootstrap 5. I did this by simply overwriting all the old bootstrap files with npm install bootstrap@next. Now I have the problem that I can't use the bootstrap utilities anymore. They just don't seem to be compiled into the stylesheet, even though they are imported.

My app.scss file:

@import "variables";

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

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

For example, if I now try to hide in element with .d-none, then this has no effect. The compiled stylesheet also does not contain a utility class.

Gelatinoid

Answer 1

There is a change in file structure in BS5 (vs. BS4).

The _utilities.scss file now only creates a variable $utilities holding all the ... utilities. Another file utilities\_api.scss, when compiled, generates the utility CSS.

For your case use:

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

Make sure to read the docs on how the API works.

Traditional

Why is this not in the docs? Or did I miss that somewhere? – Wallop

Same, I also don't know why it isn't in the docs. It's a pretty big change that should've been noted. – Nguyen

Answer 2

In the last update you should use like this:

// Here is some overrided bootstrap variables.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/utilities";

// You can edit utilities here. Explained here https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api

@import "~bootstrap/scss/utilities/api";

Also you can see tru order in the main bootstrap.scss file.

Guerin

Answer 3

Do what they say in Bootstrap doc.

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


$utilities: map-merge(
   $utilities, (
       "border": map-merge(
          map-get($utilities, "border"), 
          ( responsive: true ), ),
        )
);

@import "../bootstrap/scss/bootstrap";

always place your utilities before the bootstrap imported. and import the three files where also bootstrap mentioned in API.

Lydell

This would be the answer if the OP were trying to define their own utility, but they're trying to use one that's already defined in the Bootstrap scss – Battat