order-7 to order-12 missing?

[audaki]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Older bootstrap had order-1 to order-12

The documentation still says that 1 to 12 is supported: https://getbootstrap.com/docs/4.1/layout/grid/

But after upgrading bootstrap these classes failed, and when looking at the code, it seems like actually only 1-6 are generated: https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss#L335

Reduced test cases

No test cases

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v4+

[julien-deramond]

Hello @audaki

The documentation of Bootstrap 4.1 states that order class support is from 1 to 12. It was the case until the latest Bootstrap v4.

However, that's not the case anymore in Bootstrap 5. In the Flex > Order section:

As order takes any integer value from 0 to 5

bootstrap/dist/css/bootstrap.css

Lines 7871 to 7901 in cbbb567

	.order-first {
	order: -1 !important;
	}
	.order-0 {
	order: 0 !important;
	}
	.order-1 {
	order: 1 !important;
	}
	.order-2 {
	order: 2 !important;
	}
	.order-3 {
	order: 3 !important;
	}
	.order-4 {
	order: 4 !important;
	}
	.order-5 {
	order: 5 !important;
	}
	.order-last {
	order: 6 !important;
	}

In our migration guide, it's mentioned that:

Breaking Dropped several .order-* classes that often went unused. We now only provide .order-1 to .order-5 out of the box.

Hope it can help :) I'm going to close this issue. Feel free to comment it if there are elements that I missed.

[louismaximepiton]

To complete what was said, as mentioned by our utility API, you can still get them back using:

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

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, last: 13),
        ),
      ),
    ),
  )
);

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

[audaki]

Thanks, you’re right, I just saw that the node package was updated to Bootstrap 5, like you guessed, and the documentation for 5 correctly states order levels 1 to 5

And thanks @louismaximepiton for the workaround!