Utilities

File: src/scss/_core/utils/_responsive.scss

Responsive

Class Description
Desktop
.float-none-lg .b--0-lg .m--0-lg .p--0-lg
.border-top-lg .border-bottom-lg

There are situations where you need float/border/margin/padding in mobile devices but not for desktop/laptop.

.float-none-lg no float
.b--0-lg no borders
.b--0-lg no margins
.b--0-lg no paddings
Medium (md-up)
.text-center-md .text-start-md .float-none-md .btn.d-block-md .position-absolute-md .position-relative-md .position-fixed-md
.m--0-md .mt--0-md .mr--0-md .ml--0-md .m--15-md
.p--0-md .pt--0-md .pr--0-md .pl--0-md .p--15-md
.b--0-md .bt--0-md .br--0-md .bl--0-md

.border-top-md .border-bottom-md

.w-100-md .w-100vh-md
.h-100-md .h-100vh-md
.rounded-0-md .rounded-circle-md .overlay-none-md
.h1-md .h2-md .h3-md .h4-md .h5-md .h6-md
.shadow-none-md

All classes are to cancel/rewrite rules on medium-up devices (desktops).

@media only screen and (max-width: map-get($grid-breakpoints, "lg") - 1) and (min-width: map-get($grid-breakpoints, "md"))

.m--* all margins
.mt--* margin top
.mr--* margin right
.mb--* margin bottom
.ml--* margin left

.p--* all paddings
.pt--* padding top
.pr--* padding right
.pb--* padding bottom
.pl--* padding left

.w-* width
.h-* height


.p--15-md { padding: 15px !important; }

.w-100-xs { min-width: 0% !important; width: 100% !important; }
.w-100vh-xs { max-width: 100% !important; width: 100vh !important; }

.h-100-xs { height: auto !important; min-height: 100% !important; }
.h-100vh-xs { height: auto !important; min-height: 100vh !important; }
Small (md-down)
.text-center-xs .text-start-xs .float-none-xs .btn.d-block-xs .position-absolute-xs .position-relative-xs .position-fixed-xs
.m--0-xs .mt--0-xs .mr--0-xs .ml--0-xs .m--15-xs
.p--0-xs .pt--0-xs .pr--0-xs .pl--0-xs .p--15-xs .p-*-xs
.b--0-xs .bt--0-xs .br--0-xs .bl--0-xs

.border-top-xs .border-bottom-xs

.w-100-xs .w-100vh-xs .h-auto-xs
.h-100-xs .h-100vh-xs
.rounded-0-xs .rounded-circle-xs .overlay-none-xs
.h1-xs .h2-xs .h3-xs .h4-xs .h5-xs .h6-xs
.m-1-xs .m-2-xs .m-3-xs .m-4-xs .m-5-xs
.mt-1-xs .mt-2-xs .mt-3-xs .mt-4-xs .mt-5-xs
.mb-1-xs .mb-2-xs .mb-3-xs .mb-4-xs .mb-5-xs
.shadow-none-xs

All classes are to cancel/rewrite rules on medium-down devices (mobile devices).

@media only screen and (max-width: map-get($grid-breakpoints, "md"))

.m--* all margins
.mt--* margin top
.mr--* margin right
.mb--* margin bottom
.ml--* margin left

.p--* all paddings
.pt--* padding top
.pr--* padding right
.pb--* padding bottom
.pl--* padding left

.w-* width
.h-* height


.p--15-md { padding: 15px !important; }

.w-100-xs { min-width: 0% !important; width: 100% !important; }
.w-100vh-xs { max-width: 100% !important; width: 100vh !important; }

.h-100-xs { height: auto !important; min-height: 100% !important; }
.h-100vh-xs { height: auto !important; min-height: 100vh !important; }