Topic: How to include Bootstrap media breakpoint mixins?

Alex H. free asked 7 years 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! -Alex

Bartłomiej Malanowski staff commented 7 years ago

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

marts123 pro commented 6 years ago

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

marts123 pro commented 6 years 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 pro commented 6 years 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)

Bartłomiej Malanowski staff commented 6 years ago

@Benben what's your version of MDB Angular?

ArekSalaso free answered 6 years 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.

webteam@rbfcu.org free answered 6 years 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 free commented 6 years ago

Any update on this?

Alex H. free answered 6 years 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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags