Twitter Bootstrap New Breakpoint Plugin

bootstrap-xl.less

// xLarge screen / wide desktop
@screen-xl:                  1300px;
@screen-xl-min:              @screen-xl;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-xl-desktop:          @screen-xl-min;

// So media queries don't overlap when required, provide a maximum
@screen-lg-max:              (@screen-xl-min - 1);

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// xLarge screen / wide desktop
@container-xlarge-desktop:      (1240px + @grid-gutter-width);
//** For `@screen-xl-min` and up.
@container-xl:                 @container-xlarge-desktop;

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

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

// xLarge grid
//
// Columns, offsets, pushes, and pulls for the xlarge desktop device range.

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


// Generate the xlarge columns
.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));
  }
}

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

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) { // 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}");
  }
}

// Visibility utilities
.visible-xl {
  .responsive-invisibility();
}

.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block {
  display: none !important;
}

.visible-lg {
  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max){
    .responsive-visibility();
  }
}
.visible-lg-block {
  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max){
    display: block !important;
  }
}
.visible-lg-inline {
  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max){
    display: inline !important;
  }
}
.visible-lg-inline-block {
  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max){
    display: inline-block !important;
  }
}

.visible-xl {
  @media (min-width: @screen-xl-min) {
    .responsive-visibility();
  }
}
.visible-xl-block {
  @media (min-width: @screen-xl-min) {
    display: block !important;
  }
}
.visible-xl-inline {
  @media (min-width: @screen-xl-min) {
    display: inline !important;
  }
}
.visible-xl-inline-block {
  @media (min-width: @screen-xl-min) {
    display: inline-block !important;
  }
}

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

.new-twbs-breakpoint(xl, 1350px, lg, @screen-lg-min);
.new-twbs-breakpoint(xxl, 1600px, xl, 1350px);
.new-twbs-breakpoint(xxxl, 1900px, xxl, 1600px);
.new-twbs-breakpoint(xxxxl, 2500px, xxxl, 1600px); // etc...