Bootstrap4

[m-r-alizadeh]

Fix for bootstrap v4:

bootstrap: {
  'xs': $('<div class="device-xs hidden-sm-up">xs</div>'),
  'sm': $('<div class="device-sm hidden-xs-down hidden-md-up">sm</div>'),
  'md': $('<div class="device-md hidden-sm-down hidden-lg-up">md</div>'),
  'lg': $('<div class="device-lg hidden-xl-up hidden-md-down">lg</div>'),
  'xl': $('<div class="device-lg hidden-lg-down">xl</div>')
}

If you have better way please let us now.
thanks

[cmachanic]

Hello there!

How would you apply a fix for v4 Beta? Their previous display utility classes have been dropped.

[exreplay]

Hey,

i fixed it by changing it to the following:

var visibilityDivs = {
    'xs': $('<div class="device-xs d-block d-sm-none"></div>'),
    'sm': $('<div class="device-sm d-none d-sm-block d-md-none"></div>'),
    'md': $('<div class="device-md d-none d-sm-none d-md-block d-lg-none"></div>'),
    'lg': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-block d-xl-none"></div>'),
    'xl': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-none d-xl-block"></div>')
};

[cmachanic]

Great. Thanks, exreplay! I'll give it a shot!

[robcarey]

exreplay - changing "what" in particular to that? The source does not contain that var. Did you add it somewhere?

[cmachanic]

Hi robcarey,

I didn't take exreplay's var literally. Here's how I interpreted his solution, and it works perfectly:

detectionDivs: {
    // Bootstrap 4 beta
    bootstrap: {
        'xs': $('<div class="device-xs d-block d-sm-none"></div>'),
        'sm': $('<div class="device-sm d-none d-sm-block d-md-none"></div>'),
        'md': $('<div class="device-md d-none d-sm-none d-md-block d-lg-none"></div>'),
        'lg': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-block d-xl-none"></div>'),
        'xl': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-none d-xl-block"></div>')
    }
}

[robcarey]

Awesome thanks 36lpi ! I need to be more open minded I think :)

[sonnysavage]

It can be simplified further (with the correction of device-xl):

bootstrap: {
    'xs': $('<div class="device-xs d-block d-sm-none"></div>'),
    'sm': $('<div class="device-sm d-none d-sm-block d-md-none"></div>'),
    'md': $('<div class="device-md d-none d-md-block d-lg-none"></div>'),
    'lg': $('<div class="device-lg d-none d-lg-block d-xl-none"></div>'),
    'xl': $('<div class="device-xl d-none d-xl-block"></div>')
}

[ethanbeyer]

I'm having an issue with the following BS4 divs and their implementation:

(function($, viewport){

    // Bootstrap 4 Divs
    var bootstrapDivs = {
        'xs': $('<div class="device-xs d-block d-sm-none"></div>'),
        'sm': $('<div class="device-sm d-none d-sm-block d-md-none"></div>'),
        'md': $('<div class="device-md d-none d-md-block d-lg-none"></div>'),
        'lg': $('<div class="device-lg d-none d-lg-block d-xl-none"></div>'),
        'xl': $('<div class="device-xl d-none d-xl-block butts"></div>')
    };
    viewport.use('bs4', bootstrapDivs);

    // log
    var doSomething = function() {
        console.log('Current breakpoint: ', viewport.current());
    }

    // immediately
    doSomething();

    // on resize
    $(window).resize(
        viewport.changed(function() {
            doSomething();
        })
    );

})(jQuery, ResponsiveBootstrapToolkit);

This only happens on page load: Current breakpoint: unrecognized (that variable is being set here)

If the window changes size, it will print out the correct breakpoint: Current breakpoint: sm

Is this a a bug, a by-product of using custom visibility classes, or something I am just doing wrong?

[LazyRecon]

hi @ethanbeyer try to do call resize() function after have attached to window object like here

(function($, viewport){

    var visibilityDivs = {
        'xs': $('<div class="d-xs-block d-sm-none d-md-none d-lg-none d-xl-none"></div>'),
        'sm': $('<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"></div>'),
        'md': $('<div class="d-none d-md-block d-sm-none d-lg-none d-xl-none"></div>'),
        'lg': $('<div class="d-none d-lg-block d-sm-none d-md-none d-xl-none"></div>'),
        'xl': $('<div class="d-none d-xl-block d-sm-none d-md-none d-lg-none"></div>'),
    };

    viewport.use('custom', visibilityDivs);

    var doSomething = function() {
        console.log('Current breakpoint: ', viewport.current());
    }

    // on resize
    $(window).resize(
        viewport.changed(function() {
            doSomething();
        })
    ).resize();

})(jQuery, ResponsiveBootstrapToolkit);

[ethanbeyer]

@LazyRecon ah, thank you! That works perfectly. Better job of invoking the script at run, also.

Cheers!!

[dennisenderink]

It's sufficient to just add the following snippet before the DOM loaded callback (when required or imported for example):

viewport.breakpoints = {
    'xs': $('<div class="d-xs-block d-sm-none d-md-none d-lg-none d-xl-none"></div>'),
    'sm': $('<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"></div>'),
    'md': $('<div class="d-none d-md-block d-sm-none d-lg-none d-xl-none"></div>'),
    'lg': $('<div class="d-none d-lg-block d-sm-none d-md-none d-xl-none"></div>'),
    'xl': $('<div class="d-none d-xl-block d-sm-none d-md-none d-lg-none"></div>'),
};

[miksh7]

Is there a benefit of testing media queries programmatically by window.matchMedia ?

[maciej-gurban]

@miksh7 If you're developing for modern browsers only you can manage perfectly well with matchMedia. If you're developing something modern though you're likely using a UI framework for React/Vue/Angular - most of which nowadays offer similar functionality by providing components like <Hidden xsDown> or <Grid xs={4}> etc.

If you need bulletproof older browser support, this lib would be the way to go. While the abstraction RBT provides is rather thin, it's still pretty useful if you don't want to write your own logic that does the .is('>=xs').

[wparad]

And without jQuery
responsive-toolkit.js.txt