<div class="col-xs-12 col-sm-2">foo 1</div>
<div class="col-xs-12 col-sm-2">foo 2</div>
<div class="col-xs-12 col-sm-2">foo 3</div>
<div class="col-xs-12 col-sm-2">foo 4</div>
<div class="col-xs-12 col-sm-2">foo 5</div>
<div class="col-xs-12 col-sm-2">foo 6</div>

Causes all to be 12 col on xl and xx screen sizes.

I think you'll need to add this (outside the media query) to make it work:
.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl{
display: none !important;
}

Hello, I am using your XL css in my home page and it is brilliant.

do you know if is there a way to get back to the standard bootstrap css classes in some pages without loading a new css file?

I am working in a personal site and I use XL class in home page but I do not want to use it in other pages, I have not been able to override the XL class and of course it shows very big.

Thank you!.

Is it possible to share the less/sass file? In case you used one of course!

Thanks
I hope this gets in bootstrap 3.x. While they do great for small devices, 1200 is too low for todays computer monitors.

This is the easiest solution I found to add another breakpoint to bootstrap. Thank you for sharing.

But I needed to add this to make the column padding match the other size classes.

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

hidden-lg is not complaint with Bootstrap XL because there is no upper limit in bootstrap.css for it
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
Have to be overloaded in BoostrapXL such as:

@media (min-width: 1200px) and (max-width: 1599px) {
.hidden-lg {
display: none !important;
}
}

Should have package.json so this can be pulled down with npm

Lovely idea but first test I did failed.

        <span class="visible-lg">&nbsp; lg</span>
        <span class="visible-md">&nbsp; md</span>
        <span class="visible-sm">&nbsp; sm</span>
        <span class="visible-xs">&nbsp; xs</span>
        <span class="visible-xl">&nbsp; xl</span>

All works fine but when you get to xl size the lg is still visible.

Solution is to add

/smh add/

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

/END smh/

at the end of the second (main) media query section.

I have done my first Pull request - not sure I did it right. We will see.

ATB Steve