How to include Bootstrap media breakpoint mixins?

Alex H. asked a year ago

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!

Bartłomiej Malanowski commented a year ago

I'd like to take a look at your files. Please send me your project at

marts123 commented 9 months ago

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

marts123 commented 9 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'.

Benben commented 7 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

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

Bartłomiej Malanowski commented 7 months ago

@Benben what's your version of MDB Angular?

Alex H. answered 7 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 (, but they still do not.

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


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)
@include media-breakpoint-down(sm) { ... }
Invalid CSS after "...oint-down(sm) {": expected "}", was "... }" commented 6 months ago

Any update on this?

ArekSalaso answered 4 months 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.

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes