WebDev snippets: Bootstrap, jQuery, Vue, Blade

bootstrap-3-hidden.css

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
 * https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4#45683167
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

Bootstrap4-Variables.scss

$grid-breakpoints: ( 
xs: 0, 
sm: 600px, 
md: 800px, 
lg: 1000px, 
xl: 1200px ) !default;

$container-max-widths: ( 
sm: 600px, 
md: 800px, 
lg: 1000px, 
xl: 90% ) !default; 

$body-bg: #333; 
$body-color: #999; 
$border-radius: 1px; 
$brand-primary: #3333cc; 
$brand-success: #11cc11; 
$brand-info: cyan; 
$brand-warning: #334455; 
$brand-danger: #cc1111; 
$font-family-sans-serif: Tahoma, Geneva, sans-serif;

javascript-mobile-switch.js

$(document).ready(function() {
    if ($(window).width()< 600) {
        $('#app').addClass('mobile');
    }
    else {$('#app').removeClass('mobile');}
});

$(window).resize(function() {
    if ($(window).width() < 600) {
        $('#app').addClass('mobile');
    }
    else {$('#app').removeClass('mobile');}
});