Add sizes for XL and XXL displays to Bootstrap 3.

bootstrap-xl-xxl.scss

/**
 * Add sizes for XL and XXL displays to Bootstrap 3.
 *
 *
 * Original from https://gist.github.com/juukie/d71133e69877b46f060e
 * 
 * Notes:
 * I work with PhpStorm and the <editor-fold>-lines make the blocks make them collapsible.
 * Also, this only works for bigger sizes. If you want to add smaller sizes of display (such as XXS), please go here for instructions: http://stackoverflow.com/a/26963773/598560
 */

// reference the original Bootstrap SASS here
@import "../bootstrap/bootstrap";

// <editor-fold desc="Bootstrap XL">

$screen-xl:                  1600px !default;
$screen-xl-min:              $screen-xl !default;
$screen-xl-desktop:          $screen-xl-min !default;
$screen-lg-max:              ($screen-xl-min - 1) !default;
$container-xlarge-desktop:   (1530px + $grid-gutter-width) !default;
$container-xl:               $container-xlarge-desktop !default;

.container {
    // @include container-fixed; No need for, already done.
    @media (min-width: $screen-xl-min) {
        width: $container-xl;
    }
}

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

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

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

@mixin make-grid-columns($i: 1, $list: ".col-xl-#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-xl-#{$i}";
    }
    #{$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);
    }
}

@include make-grid-columns;

@include responsive-invisibility('.visible-xl');

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

@media (min-width: $screen-xl-min) {
    @include responsive-invisibility('.visible-lg');
    @include responsive-visibility('.visible-xl');
}
.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;
    }
}

@media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    @include responsive-invisibility('.hidden-lg');
}

@media (min-width: $screen-xl-min) {
    @include responsive-invisibility('.hidden-xl');
    @include responsive-visibility('.hidden-lg');

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

// </editor-fold>

// <editor-fold desc="Bootstrap XXL">

$screen-xxl:                  1919px !default;
$screen-xxl-min:              $screen-xxl !default;
$screen-xxl-desktop:          $screen-xxl-min !default;
$screen-xl-max:              ($screen-xxl-min - 1) !default;
$container-xxlarge-desktop:   (1530px + $grid-gutter-width) !default;
$container-xxl:               $container-xxlarge-desktop !default;

.container {
    // @include container-fixed; No need for, already done.
    @media (min-width: $screen-xxl-min) {
        width: $container-xxl;
    }
}

// xxlarge grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xxl-min) {
    @include make-grid(xxl);
}

// Generate the xxlarge columns
@mixin make-xxl-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);

    @media (min-width: $screen-xxl-min) {
        float: left;
        width: percentage(($columns / $grid-columns));
    }
}
@mixin make-xxl-column-offset($columns) {
    @media (min-width: $screen-xxl-min) {
        margin-left: percentage(($columns / $grid-columns));
    }
}
@mixin make-xxl-column-push($columns) {
    @media (min-width: $screen-xxl-min) {
        left: percentage(($columns / $grid-columns));
    }
}
@mixin make-xxl-column-pull($columns) {
    @media (min-width: $screen-xxl-min) {
        right: percentage(($columns / $grid-columns));
    }
}

@mixin make-grid-columns($i: 1, $list: ".col-xxl-#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-xxl-#{$i}";
    }
    #{$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);
    }
}

@include make-grid-columns;

@include responsive-invisibility('.visible-xxl');

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

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

@media (min-width: $screen-xl-min) and (max-width: $screen-xl-max) {
    @include responsive-invisibility('.hidden-xl');
}

@media (min-width: $screen-xxl-min) {
    @include responsive-invisibility('.hidden-xxl');
    @include responsive-visibility('.hidden-xl');

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

// </editor-fold>

So when it comes to the "heavy lifting" with css or bootstrap, I'm a novice, so please forgive the silly question: How can I implement this? I desperately need the xl and (especially) the xxl breakpoints here, I tried to just add this (copy/paste) to my current style.css file, but it didn't take. Any and all additional direction is much appreciated. - Thanks.