xxxxxxxxxx
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { }
// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { }
// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width
xxxxxxxxxx
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }
xxxxxxxxxx
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
xxxxxxxxxx
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }
xxxxxxxxxx
####### Bootstrap 5 Breakpoints #######
Breakpoint Class infix Dimensions
X-Small None <576px
Small sm >=576px
Medium md >=768px
Large lg >=992px
Extra large xl >=1200px
Extra extra large xxl >=1400px
xxxxxxxxxx
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }
xxxxxxxxxx
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1280px
);
xxxxxxxxxx
/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }
xxxxxxxxxx
@media (max-width: @screen-xs-max) { }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { }
@media (min-width: @screen-lg-min) { }
xxxxxxxxxx
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { }
// Extra large devices (large deskto