This gist adds XL breakpoint to Bootstrap-sass ...in sass flavour.

_bootstrap-breakpoint-xl.sass

// This gist adds XL breakpoint to Bootstrap-sass ...in sass flavour. 
// based on the idea from
// https://spin.atomicobject.com/2015/03/06/bootstrap-add-xl-grid-size-option/

// SETTINGS
$xl-width:                   1400px

// variables.scss

// Extra large screen / Extra wide desktop
//** Deprecated `$screen-xl` as of v3.0.1
$screen-xl:                  $xl-width !default
$screen-xl-min:              $screen-xl !default
//** Deprecated `$screen-xl-desktop` as of v3.0.1
$screen-xl-desktop:          $screen-xl-min !default

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

// Extra large screen / extra wide desktop
$container-xlarge-desktop:   ($xl-width - 30px + $grid-gutter-width) !default
//** For `$screen-lg-min` and up.
$container-xl:               $container-xlarge-desktop !default



// grid.scss

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container
  @media (min-width: $screen-xl-min)
    width: $container-xl

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-xl-min)
  @include make-grid(xl)



// mixins/grid.scss

// Generate the large columns
@mixin 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))

@mixin make-xl-column-offset($columns)
  @media (min-width: $screen-xl-min)
    margin-left: percentage(($columns / $grid-columns))

@mixin make-xl-column-push($columns)
  @media (min-width: $screen-xl-min)
    left: percentage(($columns / $grid-columns))

@mixin make-xl-column-pull($columns)
  @media (min-width: $screen-xl-min)
    right: percentage(($columns / $grid-columns))



// mixins/grid-framework.scss

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}")
  @for $i from (1 + 1) through $grid-columns
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}"

  #{$list}
    position: relative
    // Prevent columns from collapsing when empty
    min-height: 1px
    // Inner gutter via padding
    padding-left:  ceil(($grid-gutter-width / 2))
    padding-right: floor(($grid-gutter-width / 2))



// responsive-utilities.scss

// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
@include responsive-invisibility('.visible-xl')

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

// Add the max-width to lg since now it's not the widest breakpoint
@media (min-width: $screen-lg-min) and (max-width: $screen-lg-max)
  @include responsive-visibility('.visible-lg')

.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

// And generate visible classes for XL
@media (min-width: $screen-xl-min)
  @include responsive-visibility('.visible-lg')

.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

// Generate hidden class
@media (min-width: $screen-xl-min)
  @include responsive-invisibility('.hidden-xl')