Agregar breakpoints a BootStrap 4

Recortes de código

Las variables de breakpoints deben ser definidas justo antes de llamar a bootstrap.scss:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//Definir previamente las variables que serán usadas en el @import de bootstrap
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
 $grid-breakpoints: (
   xxs: 0px,
   xs: 321px,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1440px
 ); //Tener en cuenta que NO LLEVA la palabra reservada !default porque es una variable que predominará sobre la que se defina en "bootstrap" (https://robots.thoughtbot.com/sass-default)
 
 // Grid containers
 //
 // Define the maximum width of .container for different screen sizes.
$container-max-widths: (
xs: 321px,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1390px
); //Tener en cuenta que NO LLEVA la palabra reservada !default porque es una variable que predominará sobre la que se defina en "bootstrap" (https://robots.thoughtbot.com/sass-default)
//Importar bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
 
//Mi código personalizado - overrides
body
{
.....
}

Javascript para logear los Breakpoints

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
 * Mediaqueries para BS4: https://github.com/JacobLett/IfBreakpoint/blob/master/if-b4-breakpoint.js
 */
 
// Create global variables that can be used elsewhere
 
// set variables 
var bs4xxs;
var bs4xs;
var bs4sm;
var bs4md;
var bs4lg;
var bs4xl;
var bs4xxl;
var bs4breakpoint;
 
// Checks if the span is set to display lock via CSS
function bs4checkIfBlock (target) {
    var target = $(target).css('display') == 'block';
    return target;
}
 
// function to check the sizes
function bs4checkSize (){
  // Set some variables to use with the if checks below
  bs4xxs = bs4checkIfBlock('.breakpoint-check .xxs');
  bs4xs = bs4checkIfBlock('.breakpoint-check .xs');
  bs4sm = bs4checkIfBlock('.breakpoint-check .sm');
  bs4md = bs4checkIfBlock('.breakpoint-check .md');
  bs4lg = bs4checkIfBlock('.breakpoint-check .lg');
  bs4xl = bs4checkIfBlock('.breakpoint-check .xl');
  bs4xxl = bs4checkIfBlock('.breakpoint-check .xxl');
 
  var todasClases = 'xxs xs sm md lg xl xxl';
 
    // add the breakpoint to the console
    if( bs4xxs == true) {
        bs4breakpoint = "xxs";
    }
 
    if( bs4xs == true) {
        bs4breakpoint = "xs";
    }
 
    if( bs4sm == true) {
        bs4breakpoint = "sm";
    }
 
    if( bs4md == true) {
        bs4breakpoint = "md";
    }
 
    if( bs4lg == true) {
        bs4breakpoint = "lg";
    }
 
    if( bs4xl == true) {
        bs4breakpoint = "xl";
    }
 
    if( bs4xxl == true) {
        bs4breakpoint = "xxl";
    }
    console.log("bs4breakpoint",bs4breakpoint);
    $("body").removeClass(todasClases).addClass( bs4breakpoint );
 
}
// end check size
 
$(document).ready(function(){
    // Add some invisible elements with Bootstrap CSS visibile utility classes
    $( "body" ).append(
        "<div style='none;' class='breakpoint-check'>"
        +"<span class='xxs d-block d-xs-inline'>XXS&nbsp</span>"
        +"<span class='xs d-xs-block d-sm-inline'>XS&nbsp</span>"
        +"<span class='sm d-sm-block d-md-inline'>SM&nbsp</span>"
        +"<span class='md d-md-block d-lg-inline'>MD&nbsp</span>"
        +"<span class='lg d-lg-block d-xl-inline'>LG&nbsp</span>"
        +"<span class='xl d-xl-block d-xxl-inline'>XL&nbsp</span>"
        +"<span class='xxl d-xxl-block'>XXL</span>"
        +"</div>"
        );
 
    bs4checkSize();
 
 });
 
// Reload demo on  window resize
$( window ).resize( function(){
    bs4checkSize();
});

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad