document how to add another grid tier

[cvrebert]

Refs #12802 (comment)

[bjohnson045]

Here is what we currently have. If you notice anything missing or anything we should watch out for let me know.

@screen-xl:                  1600px;
@screen-xl-min:              @screen-xl;
@screen-xl-desktop:          @screen-xl-min;
@screen-lg-max:              (@screen-xl-min - 1);
@container-xl-desktop:       ((1560px + @grid-gutter-width));
@container-xl:               @container-large-desktop;

@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}

.container {
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}

.make-xl-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-xl-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-offset(@columns) {
  @media (min-width: @screen-xl-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-push(@columns) {
  @media (min-width: @screen-xl-min) {
    left: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-pull(@columns) {
  @media (min-width: @screen-xl-min) {
    right: percentage((@columns / @grid-columns));
  }
}

.visible-xl {
  .responsive-invisibility();
  @media (min-width: @screen-xl-min) {
    .responsive-visibility();
  }
}

.hidden-xl {
  @media (min-width: @screen-xl-min) {
    .responsive-invisibility();
  }
}

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

[zlatanvasovic]

@atdev2 Please note that .visible- and .hidden- classes was changed.

[bjohnson045]

@zdroid Please provide more details. Changed in 3.1.1? They seem to be documented here http://getbootstrap.com/css/#responsive-utilities and the above should do the same for the "xl" size.

[zlatanvasovic]

They're changed in the current development version, 3.2.0.

[bjohnson045]

@zdroid Do you have an issue you can reference without digging into the source? I checked #12736 and didn't really see one referencing a change, but I may be missing it.

[zlatanvasovic]

Look at the code. bdd7651

It is mentioned in the #12736.

New responsive utility classes

#12204
Block, inline-block, and inline options

[dmpe]

Bumb.

@zdroid , @atdev2

Are we going to see some changes for upcomming 3.2. I ran in exactly this problem and dont want to relly on something which is not an official solution/or officially documented.

Thanks.

[mdo]

@Johnmalc Maybe, but we have't committed to it just yet. v3.2 is overdue at this point, so it might be later.

[mdo]

I think I'm going to pass on documenting this honestly. For what it'll be used for, it seems like an edge case.

[aboutaaron]

FWIW, I would love a doc section on extending bootstrap grids. I'm currently in the process of adding a larger grid and @atdev2's comment aided me a lot.

[feluxe]

+1 for xl grid option.
Websites that are built on the .container class look way too tiny on resolutions bigger than 2000p.