Bootstrap: [Bug] Order classes also generate a class .order#{$infix}-0 for every infix

[kopax]

Order classes are starting from 0 instead of 1 for every infix

• source: https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_grid-framework.scss#L54

It should be like :

• source: https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_grid-framework.scss#L22

Generate css is wrong:

.order-1-0 {
  order: 0;
}

.order-1-1 {
  order: 1;
}

.order-1-2 {
  order: 2;
}

.order-1-3 {
  order: 3;
}

.order-1-4 {
  order: 4;
}

.order-1-5 {
  order: 5;
}

.order-1-6 {
  order: 6;
}

.order-1-7 {
  order: 7;
}

.order-1-8 {
  order: 8;
}

.order-1-9 {
  order: 9;
}

.order-1-10 {
  order: 10;
}

.order-1-11 {
  order: 11;
}

.order-1-12 {
  order: 12;
}

Possible fix:

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first { order: -1; }

      .order#{$infix}-last { order: $columns + 1; }

-      @for $i from 0 through $columns {
+      @for $i from 1 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
-      @for $i from 0 through ($columns - 1) {
+      @for $i from 1 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}

[knoobie]

Why should they not start with 0? (https://developer.mozilla.org/en/docs/Web/CSS/order)

[kopax]

Because :

• the documentation says it start at 1 (See https://getbootstrap.com/docs/4.1/layout/grid/#reordering)
  > Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

I presume the author wrote what he believe was right but also, it makes sens because:

• order-0 would be the equivalent to order-first (wich is order: -1 (https://developer.mozilla.org/en/docs/Web/CSS/order)), so it is definitly not useful to add one more util for this.

[florianlacreuse]

IMHO, .order-0 is not the same as .order-first: https://codepen.io/anon/pen/YdZGqe

I would prefer to keep .order-0. Instead, may be we can just update doc to include 0 case?

[kopax]

.order-first

.order-first {
    -ms-flex-order: -1;
    order: -1;
}

They did name in their utilities order-first and order-last for user experience I presume.

• first: the equivalent of the beginning
• last: the equivalent of the end

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed. (source)

I have trouble to understand how order-0 should be read if it's not a duplicate, In what user case will we have together:

• .order-first and .order-0
• .order-last and .order-${columns}

Is the trick of setting order: -1 really useful to demonstrate something?

Documentation is currently confusing user may think they have twice time the same utility in their code and use the wrong one.

Perhaps it could be better to update .order-first to order: 0, and do the same for .order-last?

[florianlacreuse]

.order-first has more weight than .order-0, this is why I'm trying to tell you that technically both are not equivalent (as you said).

.order-0 could also be used to override the order property define by a custom css class to reset it and set the default 0 value.

[MartijnCuppens]

As explained by @florianlacreuse, .order-0 and .order-first are not the same. I'm going to close this because everything works as documented.

Thanks for taking your time to explain things here, Florian!

[kopax]

Thanks Martijn Cuppens I was waiting for a Bootstrap member position. Thank you for your answers @florianlacreuse and @MartijnCuppens and keep up the good work.