Boostrap responsive debugging CSS.

debug-bootstrap.css

/**
 * Use this to show which breakpoint the css is using
 * when using Bootstrap responsive
 */

body::before {
    content: "xs";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background-color: #000;
    color: #fff;
}

@media (min-width : 768px) {
    body::before {
        content: "sm";
    }
}

@media (min-width : 992px) {
    body::before {
        content: "md";
    }
}

@media (min-width : 1200px) {
    body::before {
        content: "lg";
    }
}

div.border {
    border: solid 1px #9999FF;
}

/*div[class^=col-xs-] {*/
    /*border: solid red 1px;*/
/*}*/

/*div[class^=col-sm-] {*/
    /*border: solid blue 1px;*/
/*}*/

/*div[class^=col-md-] {*/
    /*border: solid green 1px;*/
/*}*/

/*div[class^=col-lg-] {*/
    /*border: solid orchid 1px;*/
/*}*/