How to include Bootstrap media breakpoint mixins?

MDB SupportCategory: MDB AngularHow to include Bootstrap media breakpoint mixins?
Alex H. asked 8 months ago in MDB free, version:4.37

As in Bootstrap 4 the “hidden-” classes were removed (see here) they suggest using the “media-breakpoint-up/down/only” Sass mixins.

The MDB Angular Bootstrap docs tells us that these classes are used, but not how to use them in our own code. So If I want to use e.g. “media-breakpoint-up()” Mixin, how do I include that? Just adding “@include media-breakpoint-up(sm) { }” into the main style.scss or a module’s scss file does not resolve it (Error: “No mixin named media-breakpoint-up”)

 

I’m using MDB Angular 4.3.7 with angular-cli.

Thanks in advance!
-Alex

Bartłomiej Malanowski Pro User replied 3 months ago

@Benben what’s your version of MDB Angular?

Benben Pro User replied 3 months ago

Same here.
ERROR in ./src/app/root/components/sidebar/sidebar.component.scss
Module build failed:
@include media-breakpoint-only(xs) {
^
No mixin named media-breakpoint-only

Backtrace:
stdin:69
in /Users/work/Projects/LAP/src/app/root/components/sidebar/sidebar.component.scss (line 69, column 10)

marts123 Pro User replied 5 months ago

I had to change /node_modules/ng-mdb-pro/assets/scss/mdb/free/data/_variables-b4.scss due to the error Incompatible units: ‘rem’ and ‘px’.

marts123 Pro User replied 5 months ago

I am also wondering what the solution is. I am having the same issue

Bartłomiej Malanowski Pro User replied 8 months ago

I’d like to take a look at your files. Please send me your project at b.malanowski@mdbootstrap.com

3 Answers
Alex H. answered 3 months ago

Hi there,

it’s been a while and I upgraded to the most current version 5.2.2.
Unfortunately the docs still say that responsive breakpoints should work with Sass mixins (https://mdbootstrap.com/angular/layout/bootstrap-layout/#responsive-breakpoints), but they still do not.

Any fixes or workarounds for that besides manually defining the breakpoints?

Thanks,
Alex

webteam@rbfcu.org answered 3 months ago

Same here

Module build failed:
@include media-breakpoint-down(sm) { … ^

Invalid CSS after “…oint-down(sm) {“: expected “}”, was “… }”
in C:Repositoriesnbo-clientsrcappnavnav.component.scss (line 19, col umn 37)
Error:
@include media-breakpoint-down(sm) { … }
^
Invalid CSS after “…oint-down(sm) {“: expected “}”, was “… }”

webteam@rbfcu.org replied 2 months ago

Any update on this?

ArekSalaso answered 6 days ago

is this resolved? for angular project it is not possible to use mixins withins app scss main file. What’s more – there is no possibility to add custom styles or create custom skins because all the files are in the node_modules so next update will probably destroy everything.